jQuery Animate 不能在滚动上工作答案

【问题标题】：jQuery Animate Not Working on ScrolljQuery Animate 不能在滚动上工作
【发布时间】：2018-03-28 09:25:42
【问题描述】：

能否请您看看This Demo 并告诉我为什么定位滚动位置的第二部分不起作用？我想要做的是将滚动位置定位在 450 到 600 之间并应用此动画

$(".box-caption").animate({ "top": "600px" },1000);

到元素

$(function() {
    $( window ).scroll(function(e) {
    var y =   $( window ).scrollTop();
      if (y >200  && y< 400){
       $(".box-caption").animate({ "top": "350px" },1000);
    }
       if (y >450  && y< 600){
       $(".box-caption").animate({ "top": "600px" },1000);
    }
    });
});

如您所见，它正在处理第一个动画，但不适用于第二个动画！能否请您告诉我为什么会发生这种情况以及如何解决？

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

我认为在前一个动画尚未完成时，动画被触发了太多次。可怜的小家伙都糊涂了！试试看 (Demo)：

$(function() {
  var is_top = false;
    $( window ).scroll(function(e) {
    var y =   $( window ).scrollTop(); 
      if (y >200  && y< 400 && !is_top){
        is_top = true;
        $(".box-caption").animate({ "top": "350px" },1000);
      } 
      if (y >450  && y< 600 && is_top){
        is_top = false;
        $(".box-caption").animate({ "top": "600px" },1000);
      } 
    });
});

问题说明：

每次滚动到第一个范围时，它都会将动画添加到队列中。因为滚动事件被称为“每秒一大堆”，所以你会在这些“第一个”动画中一秒又一秒地结束。然后当你向下滚动到第二个范围时，第二个动画也会发生同样的事情，但现在你必须等待所有第一个动画完成！与第二个动画相同，然后才能再次执行第一个动画。您可以坐在那里不滚动，只是在短暂滚动后每隔 20 秒左右观看它弹跳一次。

解决方案：

使用布尔值，我们确保每个动画只能以交替顺序运行一次。一旦第一个运行，它不能再次运行，直到第二个运行。然后当第二个运行时，它不能再次运行，直到第一个运行。来回它们只会在每个滚动范围内触发一次。

【讨论】：