Question

Here you can see the problem as JSFiddle

我设置了5个不同的滚动点，每个滚动点都有不同的图像淡入，其他5个像这样：

        $("#active1").finish().fadeIn(2000);
        $("#active2").finish().fadeOut(2000);
        $("#active3").finish().fadeOut(2000);
        $("#active4").finish().fadeOut(2000);
        $("#active5").finish().fadeOut(2000);

我有导航点，让我跳到五个滚动点中的一个，动画正常工作，褪色，它应该如何。

但是当我滚动到另一个点时，在两个滚动点之间，另一个图像会闪烁。

我希望图像能够正常淡化，就像我滚动时的导航点一样。

Answer 1

不完美但我用.finish()替换.stop(true,false)以清除动画队列而不完成动画，这应该有助于减少图像不透明度跳跃。如果用户滚动得太快，这个版本的衰落是不完美的。

图像构造函数已移出.bind()调用以避免在每个滚动事件上重建，.bind()调用本身已被jQuery推荐的.on()替换。

您的多个淡入淡出调用已被放入一个名为activeFade()的函数中，这个函数是一个简单的for循环，用于循环并淡出每个id，但传入参数的数字除外。这是为了帮助调试使它更干一些，也可以更快地尝试不同的淡入淡出时间和停止参数。

Fiddle here

    $(function() {

  var Impressum = new Image();
  Impressum.src = 'BaumImpressum.jpg';

  var Beratung = new Image();
  Beratung.src = 'BaumBeratung.jpg';

  var Therapie = new Image();
  Therapie.src = 'BaumTherapie.jpg';

  var Profil = new Image();
  Profil.src = 'BaumProfil.jpg';

  for (var i, i = 1; i < 6; i++) {
    var active = "#active" + i + ',#active_logo' + i; // describe the selectors
    $(active).fadeIn(1000);
  } // fade everything in to start

  function activeFade(n) {
    for (var i, i = 1; i < 6; i++) {
      var active = "#active" + i + ',#active_logo' + i; // describe the selectors
      var action = $(active).stop(true, false);
      if (i === n) {
        action.fadeIn(2000);
      } else {
        action.fadeOut(2000);
      } // stop true false -clears the animation queue without completing the animation
    }
  } // cycle through all five id's and fade out - except for the chosen one

  $('#content_area').on("scroll.alert", function() {

    var $this = $(this);
    //Leben
    if ($this.scrollTop() >= 0) {
      $('h1').css('color', '#694d6d');
      $('h2').css('color', '#694d6d');
      $('h3').css('color', '#694d6d');
      $("#Text1scroll").css('color', '#ffffff');
      $("#Text2scroll").css('color', '#694D6D');
      $("#Text3scroll").css('color', '#694D6D');
      $("#Text4scroll").css('color', '#694D6D');

      activeFade(1);

      $('.top').css('background-color', '#F9AE00');
      $('.footer1').css('background-color', '#694D6D');

    }
    //Beratung
    if ($this.scrollTop() >= 600) {
      $('h1').css('color', '#4c6f21');
      $('h2').css('color', '#4c6f21');
      $('h3').css('color', '#4c6f21');
      $("#Text1scroll").css('color', '#4C6F21');
      $("#Text2scroll").css('color', '#ffffff');
      $("#Text3scroll").css('color', '#4C6F21');
      $("#Text4scroll").css('color', '#4C6F21');
      //$('.rightA').css('background-image', 'url(BaumBeratung.jpg)');

      activeFade(2);

      $('.top').css('background-color', '#fec542');
      $('.footer1').css('background-color', '#88a450');
    }
    //Therapie
    if ($this.scrollTop() >= 1300) {
      $('h1').css('color', '#c5471d');
      $('h2').css('color', '#c5471d');
      $('h3').css('color', '#c5471d');
      $("#Text1scroll").css('color', '#c5471d');
      $("#Text2scroll").css('color', '#c5471d');
      $("#Text3scroll").css('color', '#ffffff');
      $("#Text4scroll").css('color', '#c5471d');

      activeFade(3);

      $('.top').css('background-color', '#c8cce9');
      $('.footer1').css('background-color', '#ee7033');
    }
    //Profil
    if ($this.scrollTop() >= 2000) {
      $('h1').css('color', '#9a4d75');
      $('h2').css('color', '#9a4d75');
      $('h3').css('color', '#9a4d75');
      $("#Text1scroll").css('color', '#9a4d75');
      $("#Text2scroll").css('color', '#9a4d75');
      $("#Text3scroll").css('color', '#9a4d75');
      $("#Text4scroll").css('color', '#ffffff');

      activeFade(4);

      $('.top').css('background-color', '#C0D360');
      $('.footer1').css('background-color', '#DE6CA8');

    }
    //Impressum
    if ($this.scrollTop() >= 2500) {
      $('h1').css('color', '#694d6d');
      $('h2').css('color', '#694d6d');
      $('h3').css('color', '#694d6d');
      $('h4').css('color', '#694d6d');
      $("#Text4scroll").css('color', '#694d6d');

      activeFade(5);

      $('.top').css('background-color', '#F9AE00');
      $('.footer1').css('background-color', '#694D6D');

    }
  });
});

在滚动时使图像褪色而不跳跃？

1 个答案: