Question

我有一个div我喜欢在触发器div和窗口顶部之间达到一定距离后动画一次，但是当在.scroll（）函数内时，动画会不断触发滚动。

以下代码可以正常使用：

$(window).scroll(function(){
   var a = $('.intro-text').offset().top;
   console.log(a);

   if ( a > 100 ) {
     $('.hide-me').fadeOut();
   } else if ( a < 100 ) {
     $('.hide-me').fadeIn();
   }

});

但如果我将其更改为.animate（），它会不断排队并永远运行：

$(window).scroll(function(){
   var a = $('.intro-text').offset().top;
   console.log(a);

   if ( a > 100 ) {

     $('.hide-me').animate({
       left: -200
     }, 1000);

   } else if ( a < 100 ) {

     $('.hide-me').animate({
       left: 0
     }, 1000);

   }

});

我的编码技巧并不是最好的，但是我想在进入任何外部库或插件之前了解jQuery / pure javascript中是否有一个函数。非常感谢任何帮助，谢谢。

Answer 1

创建scroll对象并保存两个标记fadeIn和fadeOut

var scroll = {
          fadeIn: false,
          fadeOut: false
};

<强>解释

在滚动事件中，有两个条件a>100和a<100

因此，一旦其中一个条件为真，它进入并检查是否在触发动画之前设置了标志，然后将动画的标志设置为true并清除另一个标志。

例如：

 if (a > 100) {
    if (!scroll.fadeOut) {
      $('.hide-me').fadeOut();
      scroll.fadeOut = true;
      scroll.fadeIn = false;
    }
  }

在上面的代码中

它会检查scroll.fadeOut是否未设置

它做动画

 $('.hide-me').fadeOut();

并设置标志

 scroll.fadeOut = true;
 scroll.fadeIn = false;

这将不允许再次执行此动画，直到触发第二个动画并清除该标志。

完整的JS

var scroll = {
      fadeIn: false,
      fadeOut: false
};

$(window).scroll(function() {
  var a = $('.intro-text').offset().top;
  console.log(a);

  if (a > 100) {
    if (!scroll.fadeOut) {
      $('.hide-me').fadeOut();
      scroll.fadeOut = true;
      scroll.fadeIn = false;
    }
  } else if (a < 100) {
    if (!scroll.fadeIn) {
      $('.hide-me').fadeIn();
      scroll.fadeIn = true;
      scroll.fadeOut = false;
    }
  }

});

<强>更新

var scroll = {
  fadeIn: false,
  fadeOut: false
};

$(window).scroll(function() {
  var a = $('.intro-text').offset().top;
  console.log(a);

  if (a > 100) {
    if (!scroll.fadeOut) {
      $('.hide-me').animate({
        left: -200
      }, 1000);
      scroll.fadeOut = true;
      scroll.fadeIn = false;
    }
  } else if (a < 100) {
    if (!scroll.fadeIn) {
      $('.hide-me').animate({
        left: 0
      }, 1000);
      scroll.fadeIn = true;
      scroll.fadeOut = false;
    }
  }

});

Answer 2

在这些场景中，您可以使用jquery .stop([clearQueue],[jumpToEnd])方法，如：

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

$(window).scroll(function() {
  debounce(function() {
    var a = $('.intro-text').offset().top;
    console.log(a);
    if (a > 100) {
      $('.hide-me').stop(true, true).animate({
        left: -200
      }, 1000);
    } else if (a < 100) {
      $('.hide-me').stop(true, true).animate({
        left: 0
      }, 1000);
    }
  }, 50);
});

如果在同一元素上调用多个动画方法，则后面的动画将放置在元素的效果队列中。这些动画直到第一个动画完成才会开始。调用.stop()时，队列中的下一个动画立即开始。如果clearQueue参数的值为true，则队列中的其余动画将被删除，并且永远不会运行。

滚动触发后

2 个答案: