Question

假设我只想在完成一件事后执行某些操作我会执行以下操作：

$('#content-1').fadeIn(function() {
   $("menue").slideUp();
});

但是，如果有多件具有不同动作的东西已被完全执行，那么该怎么办？像这样：

$('#content-1').fadeIn();
$('#content-2').fadeOut();
function() {
    $("menue").slideUp();
}

如何在不单独重复的情况下执行此操作？

Answer 1

你会使用回调：

$('#content-1').fadeIn(500, function() {
    $('#content-2').fadeOut(500, function() {
        $("menue").slideUp();
    });
});

或者，如果需要同时发生多个事件：

var content1_complete = false;
var content2_complete = false;
var callback = function() {
    $("menue").slideUp();
}
$('#content-1').fadeIn(500, function() {
    content1_complete = true;
    if (content1_complete && content2_complete) {
        callback();
    }
}
$('#content-2').fadeIn(500, function() {
    content2_complete = true;
    if (content1_complete && content2_complete) {
        callback();
    }
}

但请注意，如果事件花费相同的时间，它们也应该同时完成，在这种情况下，不需要有这样的标记。

Answer 2

我们可以做每个回调设置一些全局标志或其他什么的花哨的东西，但是，如果操作的确切持续时间不重要，到目前为止最简单的解决方案是将它们设置为具有相同的持续时间，然后把回调放在一个：

$('#content-1').fadeIn(400);
$('#content-2').fadeOut(400, function() {
   $("menue").slideUp();
});

由于听起来content-1正在淡化以替换content-2，因此无论如何，这可能是最美观的行为。

请注意，默认情况下，jQuery会为所有渐变动画指定相同的默认持续时间400，因此即使没有指定持续时间它也能正常工作 - 尽管我喜欢明确定义它们以便将来的开发人员不需要运行并检查文档以确保。即便如此，这应该可以正常工作：

$('#content-1').fadeIn();
$('#content-2').fadeOut(function() {
   $("menue").slideUp();
});

Answer 3

<强>更新

您可以使用promise()和done()方法：

$('#go').click(function () {
    $('#content-1').fadeIn(1000);
    $('#content-2').fadeOut(5000);
    $('#content-1, #content-2').promise().done(function(){
        $("#menu").slideUp();
    })
});

DEMO

Answer 4

喜欢这个

var myanimationstate=0;
$('#content-1').fadeIn(function(){
    if(myanimationstate){
        myslideup();
        myanimationstate=0;
    }else{
        myanimationstate++;
    }
);
$('#content-2').fadeOut(function(){
    if(myanimationstate){
        myslideup();
        myanimationstate=0;
    }else{
        myanimationstate++;
    }
);
function myslideup() {
    $("menue").slideUp();
}

只有在完全执行了多个事情时才执行某些操作

4 个答案: