滚动时使图像淡入淡出而不跳跃？

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() 调用本身已被 .on() 替换，如 jQuery.

您的多个 fade 调用已放入一个名为 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');

    }
  });
});

滚动时使图像淡入淡出而不跳跃？

Making a Image fade without jumping while scrolling?

jquery

image

scroll

fadein

fade