1

假设我希望仅在完全执行一件事时才执行某些操作，我执行以下操作：

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

但是，如果某些事情只有在具有不同动作的多个事情已经完全执行后才应该被执行呢？像这样：

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

如果没有单独和重复，我该如何做到这一点？

4

4 回答 4

2

您将使用回调：

$('#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();
    }
}

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

于 2012-07-22T04:12:24.223 回答
1

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

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

由于听起来您正在逐渐淡入content-1replace content-2，因此无论如何，这可能是最美观的行为。

请注意，默认情况下，jQuery 为所有淡入淡出动画分配相同的默认持续时间400，因此即使根本不指定持续时间，它也可以工作——尽管我喜欢明确定义它们，这样未来的开发人员就不需要运行和检查文件以确保。即便如此，这应该可以正常工作：

$('#content-1').fadeIn();
$('#content-2').fadeOut(function() {
   $("menue").slideUp();
});
于 2012-07-22T04:14:51.960 回答
1

更新：

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

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

演示

于 2012-07-22T04:17:43.167 回答
1

像这样

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();
}
于 2012-07-22T04:17:58.513 回答