fadeIn/FadeOutが実行されている間に他のスクリプトが実行されないようにします

Question

私は、クリックすると複数のdivをフェードイン/アウトする4つの異なるスクリプトセットを用意しています。私が取り組んでいる問題は、フェードイン/アウトエフェクトが混ざり合っている場合です。フェードイン/アウトサイクルが完了した後でのみ、どのようにそれらを起動するように設定できますか？

ここに私のjqueryスクリプトがあります。私は必要に応じてHTMLを投稿することができます。

// 1st Navigation 


$("#1stforward").click(function() { 
    $("#1st").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3375).fadeIn(4500, 'swing'); 

}); 



//2nd Navigation 


$("#2ndback").click(function() { 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#1st").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#2ndforward").click(function() { 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 




// 3rd Navigation 


$("#3rdback").click(function() { 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#3rdforward").click(function() { 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#4th").delay(3500).fadeIn(4500, 'swing'); 


}); 



// 4th Navigation 


$("#4thback").click(function() { 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#4thforward").click(function() { 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#5th").delay(3500).fadeIn(4500, 'swing'); 


}); 

Answer 1

あなたは、任意の要素が現在のjQuery :animatedセレクタを使用してアニメーション化されて"back"または"forward"で終わるidを持つかどうかを確認するための関数を作成することができ、またはtrueは内.animate()を呼び出さない場合.queue().lengthは、0よりも大きく、現在のclickハンドラ、その他の場合はを

function animating() { 
    return $("[id$=back], [id$=forward]").is(":animated") 
     || $("[id$=back], [id$=forward]") 
      .filter(function(i, el) {return $(el).queue().length}).length 
} 

は例

$("#3rdback").click(function() { 
    if (!animated) { 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3500).fadeIn(4500, 'swing'); 
    } 
}); 

Answer 2

についてフェードインとフェードアウト関数呼び出しのためのcomplete callbackサポートがあります。詳細はこちらをご覧ください。 http://api.jquery.com/fadein/

このように実装する必要があります。

$("#3rd").fadeIn("slow", function() { 

    // Animation complete 
    $("#2nd").fadeOut("slow", function() { 
    // Animation complete 
    }); 

}); 

Answer 3

あなたはすべての部門が正しいと言いますか？もしそうなら、これをかなりコピー/ペーストすることができ、ダブルクリックを防ぐことができます。私は0.5秒間タイムアウト機能を設定しています。必要に応じて '500'のミリ秒を変更することができます。これは、ポインタイベント（クリックなど）を0.5秒間防ぎます。

クリックしたくないものすべてに特定のクラスを追加し、タイムアウト関数でこれをターゲットにする方がよいでしょう。

// 1st Navigation 


$("#1stforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $(this).css(
    $("#1st").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3375).fadeIn(4500, 'swing'); 

}); 



//2nd Navigation 


$("#2ndback").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#1st").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#2ndforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#2nd").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 




// 3rd Navigation 


$("#3rdback").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#2nd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#3rdforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#3rd").fadeOut(3500, 'swing'); 
    $("#4th").delay(3500).fadeIn(4500, 'swing'); 


}); 



// 4th Navigation 


$("#4thback").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#3rd").delay(3500).fadeIn(4500, 'swing'); 


}); 

$("#4thforward").click(function() { 
    $('div').css('pointer-events', 'none'); 
    setTimeout(function() { 
    $('div').css('pointer-events', ''); 
    },500); 
    $("#4th").fadeOut(3500, 'swing'); 
    $("#5th").delay(3500).fadeIn(4500, 'swing'); 


});