javascript - 如何使用 scrollTop() 制作反向动画；

Question

function firstAnimation() {
  $('.etc(1)').fadeIn();
}
function secondAnimation() {
  $('.etc(1)').fadeOut();
  $('.etc(2)').fadeIn();
}

function thirdAnimation() {
  $('.etc(2)').fadeOut();
  $('.etc(3)').fadeIn();
}

function fourthAnimation() {
  $('.etc(3)').fadeOut();
  $('.etc(4)').fadeIn();
}


$(window).scroll(function() {
  if ($(this).scrollTop() > 150) {
    firstAnimation();
  }
  if ($(this).scrollTop() > 300) {
    secondAnimation();
  }
  if ($(this).scrollTop() > 450) {
    thirdAnimation();
  }
  if ($(this).scrollTop() > 600) {
    fourthAnimation();
  }

});

伙计们，我正在使用 scrollTop() 为我的网站的一部分制作动画，我想知道如果滚动到底部而不是顶部，我是否可以反转动画。

我正在搜索，但在 jquery 中没有 scrollBottom。

Answer 1

首先，为每个if语句设置一个额外的要求，将每个事件条件化为一个滚动范围，以防止触发多个事件。其次，将 .fadeOut() 函数添加到下一个元素，以便在用户向相反方向滚动时反转效果。

代码应该是这样的:

function firstAnimation() {
  $('.etc1').fadeIn();
  $('.etc2').fadeOut();
}

function secondAnimation() {
  $('.etc1').fadeOut();
  $('.etc2').fadeIn();
  $('.etc3').fadeOut();
}

function thirdAnimation() {
  $('.etc2').fadeOut();
  $('.etc3').fadeIn();
  $('.etc4').fadeOut();
}

function fourthAnimation() {
  $('.etc3').fadeOut();
  $('.etc4').fadeIn();
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
    firstAnimation();
  }
  if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
    secondAnimation();
  }
  if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
    thirdAnimation();
  }
  if ($(this).scrollTop() > 6000) {
    fourthAnimation();
  }
});

Demo on JSFiddle