Question

我正在处理这个单页网站，很少有东西（h1不透明度，导航高度等）基于滚动动画。最初它可以工作，但是在稍微滚动之后，会遇到重度滞后和未经检测的行为（例如，导航高度不间断切换几秒钟）。尝试了velocity.js和transit.js，同样的事情发生了。我用这个简化的笔来演示：

http://codepen.io/galingong/pen/BHeyz/

我做错了什么或这是浏览器问题？我正在使用Chrome 35进行测试。

Answer 1

动画前简单使用stop()。出现此问题的原因是所有动画都相互排队，并且每个动画都会使此队列变长。使用stop()确保停止特定元素的所有先前动画＆amp;从新的角度出发。

E.g。

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

更改为

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

Answer 2

滚动事件在每个滚动上被触发 lot 次，因此它可能是一个主要的性能瓶颈。您需要非常小心在scroll事件的处理程序中执行的操作。 John Resig有一些good advice，我将其概括为：

缓存jQuery选择器
拥有尽可能少的滚动处理程序
限制您致电处理程序的频率

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

$(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;
  };

});

Answer 3

是的，在.animate（）之前，你应该在大多数情况下使用.stop（）。此方法停止与当前元素有连接的所有效果，因为如果在元素上更快地悬停它具有动画属性 - 持续时间，则所有行为都保持某种顺序。 jQuery将完成所有订单。

jQuery动画滞后和卡纸

3 个答案: