jquery - アニメーションが完了する前に html 要素をクリックしないようにするにはどうすればよいですか?

Question

div のクリック イベント バインドを使用して、div を展開/折りたたみます。展開/折りたたみは を使用して行われ $('#myid').animate(myfunctiontocollapse/expand)ます。たとえば、div の高さがゼロで、div をクリックして展開し、展開が完了する前にもう一度クリックすると、折りたたみのコードが呼び出され、div の形が崩れます。折りたたみ/展開が行われているときに、2回目のクリックイベントを防ぐにはどうすればよいですか?

Answer 1

クリックをバインド解除してから、ハンドラーを完了パラメーターの一部として再バインドします

アニメーション機能が何であるかは明確ではshow()ありませんが、より良いオプションかもしれません:

var myClickHandler = function(el){
    $(el).unbind("click");
    $('#myid').show('slow', function() { $("#mytrigger").click(myClickHandler) }
}
$('#mytrigger').click(myClickHandler);

animate()関数が本当にそのカスタムである場合も、同じことができます。

Answer 2

クリック関数でまだアニメーション化されているかどうかを確認し、アニメーション化されている場合は false を返して、デフォルトのクリック アクションと伝播を防ぐことができます。

if($('#myid').is(':animated')){
    return false;
}

Answer 3

jQueryの.stop() http://api.jquery.com/stop/メソッドを使用して、現在実行中のアニメーションを停止できます。

これがサンプルコードです。

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});