我的動畫滾動滯後，爲什麼

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

我的動畫滾動滯後，爲什麼

回答

相關問題