我的动画滚动滞后，为什么

HTML：

<html> 
<body style="height:2000px"> 
    <div id="header"> 
    </div> 
</body> 
</html>

CSS：

#header{height:200px; background:#000; position:fixed; top:0; width:100%;}

JS：

$(function(){ 
    $(window).bind('scroll', function(){ 
     if($(this).scrollTop() >= 150) { 
      $('#header').attr('data-open','open'); 
     } 
     if($(this).scrollTop() >= 150 && $('#header').attr('data-open') == 'open'){ 
      $("#header").animate({top:'-180px'},500, 'linear').attr('data-open','open'); 
     }else{ 
      $("#header").animate({top:'0'},500, 'linear').removeAttr('data-open'); 
     } 
    }); 
});

演示：http://jsfiddle.net/egZ6H/1/

它似乎工作，但当我回到顶部时，有时显示菜单的动画开始有点太迟，反之亦然。

这是什么原因造成的？

来源

2012-02-21 Warface

您需要在每次动画调用之前调用.stop()以确保它不会在开始此动画之前等待完成最后一个动画。

参见updated jsFiddle。

代码是：

$(function(){ 
    $(window).bind('scroll', function(){ 
     if($(this).scrollTop() >= 150) { 
      $('#header').data('open','open'); 
     } 
     if($(this).scrollTop() >= 150 && $('#header').data('open') == 'open'){ 
      $("#header").stop().animate({top:'-180px'},500, 'linear').data('open','open'); 
     }else{ 
      $("#header").stop().animate({top:'0'},500, 'linear').data('open', null); 
     } 
    }); 
});

来源

2012-02-21 14:52:40 GregL

地狱啊！谢谢！ – Warface 2012-02-21 14:55:51

我的动画滚动滞后，为什么

回答

相关问题