Question

How can I make #blue animate only when #red has fadeOut completely? I mean:
1. red fadeOut
2. wait 1 second
3. blue animate…

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

You can play and try here: http://jsfiddle.net/J8PVZ/

Answer 1

Use the fadeout callback and move delay before animate : http://jsfiddle.net/J8PVZ/1/

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