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

问题说明：

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

<强>解决方案：

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

jQuery Animate不能在Scroll上工作

1 个答案: