jQuery .stop（）回調問題

Question

我試圖觸發動畫作爲回調到另一個動畫。事情是我只想要第二個動畫，如果第一個完成，並從我讀過的是.stop（）函數應該如何工作。然而，在我編譯的代碼中，即使第一個動畫未完成，第二個動畫也會觸發。

下面的代碼：

$(document).ready(function(){ 
    var angle = 0; 

    function arrowRotate() { 
     angle +=180; 
     $('#arrow img').stop().rotate({ 
      animateTo: angle, 
     }, 100); 
    }; 

    function ToggleOpen(heightValue) { 
     $('#information').stop().animate({ 
      height : heightValue, 
     }, 1500, 'easeOutExpo', function(){ 
      arrowRotate(); 
     }) 
    }; 

    $('#information_container').hover(function(){ 
     ToggleOpen(500); 

    }, function(){ 
     ToggleOpen(0); 
    }); 

    $('#arrow img').click(function(){ 
     ToggleOpen(0); 
    }); 

}); 

我使用這個第三方插件：http://code.google.com/p/jqueryrotate/

這裏的現場實施：http://hopeandpurpose.org

所以基本上我想要做到的是提高懸停的div高度，一旦圖像旋轉完成。問題是，即使高度動畫沒有完成，並且div動畫回到0，圖像仍然會旋轉。

現在我正在查看代碼，似乎我的問題可能是因爲它懸停，它會觸發arrowRotate（）函數。包裝arrowRotate（）函數的if函數是我的最佳解決方案嗎？

Answer 1

使用stop(true)停止動畫，並清除所有排隊等候的動畫的元素上運行。

這裏是example fiddle - 如果在高度縮小之前將鼠標關閉，則會看到該動畫未運行，因爲它在mouseleave處理程序中被stop(true)清除。