jQuery 动画在滚动时延迟答案

【问题标题】：jQuery Animation is delayed on scrolljQuery 动画在滚动时延迟
【发布时间】：2015-03-02 14:41:40
【问题描述】：

当我使用以下代码滚动过去时，我将其设置为 div 的宽度增加。现在我做同样的事情，除了 .fadeIn() 并且它工作正常。但是当我使用 .animate() 时，我会滚动到那个位置并且什么都不会发生，但是就像随机的 30-40 秒后它会决定在我什至没有触摸/移动任何东西的情况下进行动画处理。有什么原因吗？

HTML

<div>

    2500px of CONTENT

</div>

<div class="statbar"></div>

CSS

.statbar {
   width:100px;
   height:30px;
   background-color:#ff4200;
}

jQuery

    $(document).scroll(function () {
        var y = $(this).scrollTop();

        if (y > 2500) {
            $('.statbar').animate({width:'200px'}, 300);
        } else {
            $('.statbar').animate({width:'10px'}, 300);
        }


});

这是一个 JSFiddle 示例：https://jsfiddle.net/kr4yeyw3/2/

如果您在 div 处等待大约 30 秒，您会看到动画会发生（需要像 fadeIn() 那样立即发生。

编辑：当我将那些 300 更改为零时它可以工作，但它不会动画！只需立即更改宽度而无需“滑动”它。

EDIT2：终于为有一天滚动浏览此页面寻找类似答案的人找到了答案。

添加 clearQueue()、stop() 和缓动似乎可以解决问题

$('.statbar').clearQueue().stop().animate({width:'75%'}, { "duration": 400, "easing": "linear" });

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

clearQueue 或 Stop 会修复动画，但它不能解决代码的真正问题。在你的 else 语句中，当你滚动到页面底部时，它会被点击 2000 次，你正在启动一个持续时间为 400 毫秒的动画。

jQuery animate 将所有动画放入一个队列并一个接一个地调用它们，因此它会在您真正想要看到的动画之前产生巨大的延迟。 api.jquery.com/animate/

以下是我认为您应该重新编写代码的方式：

var isExpanded = false;

$(document).scroll(function () {

  var y = $(this).scrollTop();

  if (y > 2500) {
    
    $('.statbar').animate({width:'200px'}, 300);
    isExpanded = true;
    
  } else if(isExpanded) {
    
    $('.statbar').animate({width:'10px'}, 300);
    isExpanded = false;
    
  }
});

这里我使用一个标志来确定是否需要运行动画，并在我们切换显示模式时切换它。

【讨论】：