Jquery的反應時間慢

我嘗試使用jQuery的我的頭動畫，動畫減慢我加入後：Jquery的反應時間慢

else if (headeranimated && $(this).scrollTop() > 1200) 
else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000)

我要等待幾秒鐘的動畫的第二部分。這段代碼有什麼問題嗎？

謝謝

// header animation 
 
var headeranimated2 = false; 
 
var headeranimated = false; 
 
var headeranimated3 = false; 
 

 
$(window).scroll(function() { 
 
    if ($(window).width() > 800) { 
 
    if (!headeranimated && $(this).scrollTop() > 500) { 
 
     $('#headerpattern').animate({ 
 
     left: "-40%" 
 
     }, 800); 
 
     headeranimated = true; 
 
    } else if (headeranimated && $(this).scrollTop() > 1200) { 
 
     $('#headerpattern').animate({ 
 
     top: "-20%" 
 
     }, 200); 
 
     headeranimated2 = true; 
 
    } else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000) { 
 
     $('#headerpattern').animate({ 
 
     top: "0" 
 
     }, 200); 
 
     headeranimated2 = false; 
 
     headeranimated3 = true 
 
    } else if (headeranimated3 && !headeranimated2 && $(this).scrollTop() < 400) { 
 
     $('#headerpattern').animate({ 
 
     left: "0" 
 
     }, 800); 
 
     headeranimated = false; 
 
     headeranimated3 = false; 
 
    } 
 
    } else { 
 
    if (!headeranimated && $(this).scrollTop() > 500) { 
 
     $('#headerpattern').animate({ 
 
     top: "-8%" 
 
     }, 1200); 
 
     headeranimated = true; 
 
    } else if (headeranimated && $(this).scrollTop() < 400) { 
 
     $('#headerpattern').animate({ 
 
     top: "0" 
 
     }, 800); 
 
     headeranimated2 = false; 
 
    } 
 
    } 
 
});

來源

2014-11-24 Zheng Wang

好..你正在調用滾動監聽器，它會在你滾動的時候發生。但是你也會播放一個動畫，這個動畫的滾動速度很慢。當您通過滾動來調用滾動監聽器時，會創建多個嘗試一次播放所有內容的nimations調用（這就是爲什麼它會減慢ui的速度）。

解決：如果動畫仍然發揮 - 不要滾動

var animScroll; 

$(window).scroll(function() 
{ 
    if (animScroll) return; 

    if ($(window).width() > 800) 
    {  
     if (!headeranimated && $(this).scrollTop() > 500) 
     { 
     animScroll = true; 
     $('#headerpattern').animate({ left: "-40%"}, 800, function() 
     { 
      animScroll = false; 
     }); 

     headeranimated = true; 
    } 

    // rest of code

來源

2014-11-24 09:16:38 ymz

一個scroll甚至是連續發射時滾動的事件，所以它會被多次觸發第二，而你正在滾動。

無論何時您對元素調用.animate，動畫都會添加到隊列中。動畫按照添加到隊列中的順序依次執行。由於動畫的持續時間範圍爲200到1200，因此您可能會產生持續時間爲幾秒的動畫隊列。

一個解決辦法是打電話給.stop()打電話之前.animate：

$('#headerpattern').stop().animate(....)

但是，這可能會破壞你想要的效果。

另一種解決方案是檢查是否有一個當前正在運行的動畫，如果是，則不要開始新的動畫。但是這樣會有一些停止走或延遲的影響。

來源

2014-11-24 09:16:15

是啊，這似乎是這裏最簡單的解決方案，但我只是想知道是否會影響性能（速度較慢的計算機）如果我只是讓滾動功能繼續運行？ – 2014-11-24 09:42:31

是的.stop（）會影響動畫，因爲它不是觸控板友好的。 – 2014-11-24 09:45:07

@鄭王嗯問題是，用戶滾動的時間越長，動畫隊列變得越大。即使它不是性能問題，您的效果也會在再次運行_correct_之前被阻止很長時間。特別是對於觸摸設備，這可能是一個巨大的問題。通常我會說使用'.animation'這種效果是不可行的。 – 2014-11-24 09:49:28

Jquery的反應時間慢

回答

相關問題