jquery - 一个 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： http animate: //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");
            });
        });
    }
    );