Question

如果#red完全没有fadeOut，我怎样才能制作#blue动画？我的意思是：
1. red fadeOut
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

您可以使用fadeout回调函数并使用.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");
            });
        });
    }
    );

一个div fadeOut，等待，另一个div动画

4 个答案: