アニメーションの実行中にJavaScriptの「クリック」メソッドを一度にクリックできるようにする方法はありますか？

Question

要素をクリックすると、divが画面の中央にスライドします。別の要素をクリックすると、中央にdiv他の画面と別のdivスライドを滑り落ちる。

初期divが画面の中央にスライドする時間を持って前に別の要素がクリックされたときに問題が発生します。あなたがaboutをクリックして、すぐに矛盾にそれらの両方のスライドcontactをクリック言い換えれば

$('#about').click(function(){ 
    /* makes any visible div slide out and slides in the 'about' div */ }); 

$('#contact').click(function(){ 
    /* makes any visible div slide out and slides in the 'contact' div */ }); 

、。

私はすでに "attrRemove"、 "unbind"、 "off"を試しましたが、それらはクリックを無効にするように機能しますが、再度有効にすることはできません。

Answer 1

これにアプローチする方法の1つは、アクションが現在有効かどうかを示す変数を使用することです。あなたは完全に（例は下記のやっているとして）クリックを無視しないように（イベントをキューにしたい場合は、コードはある種のキューに追加するように変更することができます。

var slideInProgress = false; 

$('#about').click(function(){ 
    if (!slideInProgress) { 
     slideInProgress = true; 
     $("#slider").slideToggle(5000, function(){ 
     slideInProgress = false; 
    }); 
    } 
}); 

Aすぐにこの例のために一緒にフィドルを入れて、非常に単純なここにある：https://jsfiddle.net/t8tcr0rp/

Answer 2

このコードは役立つかもしれ

function aboutFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 

function contactFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 


$('#about').on('click', aboutFunc); 
$('#contact').on('click', contactFunc);