jQuery 动画不在滚动上工作

Question

能否请您看一下 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);
    }
    });
});

如您所见，它正在处理第一个动画，但没有处理第二个！你能告诉我为什么会这样吗？我该如何解决？

Answer 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);
      } 
    });
});

问题说明：

每次您滚动到第一个范围时，它都会将动画添加到队列中。因为正在调用滚动事件 "a whole bunch per second" 你最终会看到这些 "first" 动画中的一秒又一秒。然后，当您向下滚动到第二个范围时，第二个动画会发生同样的事情，但现在您必须等待所有第一个动画完成！在它可以再次执行第一个动画之前，与第二个动画相同。你可以坐在那里不滚动，只是看着它在短暂滚动后每隔二十秒左右跳动一次。

解法：

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

jQuery 动画不在滚动上工作

jQuery Animate Not Working on Scroll

javascript

jquery

css

jquery-animate