javascript - フェードアウトが完全に完了するまで、フェードインしないでください

Question

ボタンをクリックすると、古いボックスがフェードアウトし、新しいボックスがフェードインします。

.fadeOut() が終了するまで .fadeIn() を実行したくありません。この方法では、2 つのコンテナが同時に表示されることはありません。

どうすればこれを達成できますか?

Answer 1

これを行うには、単純にfadeOut()コールバックを使用します。

$('#thing').fadeOut('slow', function() {
    // Animation complete.
    $('#otherThing').fadeIn();
});

Answer 2

I would personally try:

$("#button").click(function(e){
    $("#thing1").fadeOut(1000);
    $("#thing2").delay(1000);
    $("#thing1").fadeIn(1000);
});

I have done many similar effects in jQuery and I am 95% sure this will work.