jQuery動畫滯後和堵塞

我正在研究這個單頁面網站，很少有東西（h1不透明度，導航高度等）基於滾動進行動畫處理。最初它可以工作，但是在滾動一下之後，會遇到嚴重滯後和未解決的行爲（例如，不停地切換導航高度幾秒鐘）。試過velocity.js和transit.js，同樣的事情發生。我做了這個簡化的筆來證明：jQuery動畫滯後和堵塞

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

難道我做錯了什麼，或者這是一個瀏覽器的問題，我在Chrome 35

來源

2014-06-27 galingong

簡單使用stop()動畫之前測試。發生這個問題會導致所有的動畫都排在後面，並且每個動畫都會延長這個隊列的長度。使用stop()確保停止從新點開始的特定元素&的所有先前動畫。

E.g.

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

變化

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

來源

2014-06-27 10:40:21 demonofthemist

謝謝你，它的工作原理！ – galingong

@galingong永遠歡迎！ – demonofthemist

滾動事件被觸發大量的每個滾動次，所以它可能是一個主要的性能瓶頸。你需要非常小心你在滾動事件的處理程序中做了什麼。約翰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; 
    }; 

});

來源

2014-06-27 10:52:14 cfs

謝謝，雖然建議rohanAM解決了我的問題，我一定會閱讀您鏈接的帖子。 – galingong

是的，在.animate（）之前，大多數情況下應該使用.stop（）。該方法停止與當前元素有連接的所有效果，因爲如果將元素更快地移動到具有動畫屬性 - 持續時間的元素上，所有行爲將保持某種順序。 jQuery將完成所有訂單。

來源

2014-06-27 10:54:59 Aziz

當使用velocity.js或transit.js時，這也適用嗎？ – galingong

.stop（） - 是方法jQuery，如果velocity或transit作爲jquery對象或jquery工作，所以它將工作。你應該嘗試和它一起玩，這是你看到的非常簡單的方法。 – Aziz

Velocity的停止命令通過$ element.velocity（「stop」）使用。您也可以執行$ element.velocity（「stop」，true）來清除整個剩餘的動畫隊列。 – execution

jQuery動畫滯後和堵塞

回答

相關問題