jquery - 1 つの div フェードアウト、待機、別の div アニメーション

Question

#red が完全にフェードアウトしている場合にのみ #blue をアニメーション化するにはどうすればよいですか? つまり:
1. 赤のフェードアウト
2. 1 秒待つ
3. 青のアニメーション...

$(function(){     
    $("#blue").click(function() {
        $("#red").fadeOut("slow");
        $("#blue").animate({top:'20px'},"slow").delay(1000).fadeOut("slow"); 
    }); 
})

ここで遊んで試すことができます：http://jsfiddle.net/J8PVZ/

Answer 1

fadeoutコールバックを使用してdelay前に移動animate: http://jsfiddle.net/J8PVZ/1/

$(function(){     
    $("#blue").click(function() {
        $("#red").fadeOut("slow",function(){
            $("#blue").delay(1000).animate({top:'20px'},"slow").fadeOut("slow");     
        });
    }); 
})

Answer 2

fadeOut()ここのドキュメントに示されているように、のコールバック関数について知っておく必要があります。

http://api.jquery.com/fadeOut/

また、アニメーション化する前に遅延する必要があります。

$(function(){
    $("#blue").click(function() {
        $("#red").fadeOut("slow", function() {
            $("#blue").delay(1000).animate({top:'20px'},"slow").fadeOut("slow");
        });
    });
});

Answer 3

フェードアウト コールバック関数と以下を使用して実現できます.promise().done()。

http://jsfiddle.net/J8PVZ/2/

$("#blue").click(function () {
    $("#red").fadeOut("slow").promise().done(function(){
        $("#blue").delay(1000).fadeOut("slow")
    });
});

Answer 4

http://api.jquery.com/fadeOut/

コールバックメソッドを使用する

$(document).ready(function(){   

        $("#blue").bind('click',function() {        
        $("#red").fadeOut("slow",function(){        
            $("#blue").animate({top:'20px'},"slow").delay(1000).fadeOut("slow");
            });
        });
    }
    );