2012-03-26 100 views
1

我在與jQuery的stop()搞混,最後以無限循環結束。 這個想法是(只是出於實驗)創建一個帶有「step」條件的動畫,它將檢查元素的css屬性是否達到了某個值,並且在這種情況下,將動畫停止在其軌道中,清除隊列並立即完成動畫。用jQuery無限循環.stop()

我知道這可能聽起來很愚蠢,因爲它可能不是.stop()的意思,但我想你可能會給我一個這種意外行爲的答案。

下面的代碼:

$("#element").animate({ 
    "width": "500px", 
    "height": "130px" 
}, { 
    "duration": 850, 
    "step": function() { 
     var currentWidth = $(this).width(); 
     if(currentWidth >= 295) $(this).stop(true, true); 
    } 
}).slideUp(700); 

我發現了無限循環由第二true傳遞給stop()造成的 - 也就是說,它告訴動畫的參數立即完成。

它可能與'step'功能有關,但任何人都可以解釋我這種行爲嗎?

回答

1

它可能做這樣的事情:

  1. 運行動畫幀
  2. 運行階躍函數
  3. 步驟狀況的真實
  4. 停止動畫,但完成它立即
  5. 運行最後動畫幀完成動畫
  6. 運行步驟功能(循環回步驟2)
  7. 集動畫幀完整(從未達到)
  8. 集動畫作爲完整的(從未達到)

如果你可以檢查步驟是在最後的動畫幀出現,你可以考慮到這一點時,調用stop()。

2

呼叫:

$(this).stop(true, true); 

將執行step功能的最後一步。在那次通話中,你再次呼叫停止。直到step函數完成,動畫才從隊列中移除。由於動畫仍然在隊列中,因此再次調用stop執行最後的step ...。

+0

謝謝你,我不完全瞭解,雖然你的答案,讓我們看看,如果我得到主穴:當我打電話.stop(真,真)動畫運行一次多爲最後的時間和執行「步驟「...在」步驟「中.stop被再次調用並導致動畫再次運行,最後一次......等等,並創建一個無限循環......是否正確?另外,你能否提供一些代碼,說明如何正確實現我想要的?非常感謝你。 – user1236489 2012-03-29 13:02:22