jQuery动画滞后和阻塞

我在这个单页网站上工作，很少有东西（h1不透明度、导航高度等）是基于滚动的动画。最初它可以工作，但在滚动一段时间后，会出现严重滞后和未扩展的行为（例如，持续几秒钟不停地切换导航高度）。尝试velocity.js和transit.js，同样的情况也会发生。我制作这款简化笔是为了演示：

我是做错了什么，还是这是一个浏览器问题？我正在Chrome 35中进行测试。

动画前简单使用

stop（）

。发生此问题是因为您的所有动画都在彼此之后排队，并且随着每个动画的出现，队列会变长。使用

stop（）

确保停止特定元素的所有先前动画&从新点开始

例如

改为

$('header h1').stop().animate({opacity:0},300);

滚动事件在每个滚动上都会触发很多次，因此它可能是一个主要的性能瓶颈。您需要非常小心在scroll事件的处理程序中执行的操作。John Resig提出了一些建议，我总结如下：

• 缓存jQuery选择器
• 尽可能少地使用滚动处理程序
• 限制您呼叫处理程序的频率

以下是根据他的建议重新编写的滚动功能：

是的，在.animate（）之前，大多数情况下应该使用.stop（）。

---

此方法停止所有与当前元素相关的效果，因为若将鼠标悬停在元素上的速度快于它的动画属性-持续时间，则所有行为都会保持一定的顺序。jQuery将完成所有订单。

谢谢，虽然rohanAM提出的建议解决了我的问题，但我肯定会阅读您链接的帖子。这是否也适用于使用velocity.js或transit.js？stop（）是jQuery方法，如果velocity或transit作为jQuery对象或在jQuery上工作，那么它将工作。您应该尝试使用它，这是一种非常简单的方法。Velocity的stop命令通过$element.Velocity（“stop”）使用。您还可以执行$element.velocity（“stop”，true）来清除剩余的整个动画队列。

$('header h1').stop().animate({opacity:0},300);

$(function(){
  var lastScroll = 0,
      $window = $(window),
      $nav = $('nav'),
      $h1 = $('header h1'),
      lastScroll = 0.
      didScroll = false
  ;

  $window.scroll(function(){
    didScroll = true;
  });

  window.setInterval(function() {
    if(didScroll) {
      didScroll = false;
      onScroll();
    }
  }, 250);

  function onScroll() {
    var st = $window.scrollTop();

    if (st > lastScroll){
      $nav.stop().animate({paddingTop:"0px"},300);
    }
    else {
      $nav.stop().animate({paddingTop:"100"},300);
    }

    if (st >= 300){
      $h1.stop().animate({opacity:0},300);
    }
    else{
      $h1.stop().animate({opacity:1},300);
    }

    lastScroll = st;
  };

});