jQuery .stop（）コールバックの問題

Question

私は別のアニメーションへのコールバックとしてアニメーションをトリガーしようとしています。物事は、最初のアニメーションが完了すれば2番目のアニメーションだけが欲しいということです。そして、私が読んだのは、.stop（）関数がどのように動作するのかです。しかし、私がコンパイルしたコードでは、最初のアニメーションが完了しなくても、2番目のアニメーションが起動します。ここで

はコードです：

$(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（）関数をラップする関数が私の最善の解決策になるのだろうか？

Answer 1

stop(true)を使用してアニメーションを停止し、要素で実行を待機している待機中のアニメーションもクリアします。

ここにはexample fiddleがあります。高さが低下する前にマウスを離しておけば、そのアニメーションはmouseleaveハンドラのstop(true)でクリアされているため、アニメーションが実行されていないことがわかります。