Question

当我使用以下代码滚动它时，我将它设置为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更改为零时，它可以工作，但它没有动画效果！只需改变宽度即可，而不会滑动＆＃34;结束了。

EDIT2：最后想到有人每天滚动浏览此页面寻找类似的答案。

添加clearQueue（），stop（）和缓动似乎可以解决问题

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

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

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

滚动时jQuery动画延迟

1 个答案: