Question

我有以下问题：我希望在两个元素淡出后发生一些事情。它们应该在同一时间淡出：

$("#publish-left, #publish-right, #print-run").fadeOut(function(){
    //do something
});

然而，这似乎并不像我想要的那样。如何让我的脚本淡出两个元素，然后做一些事情？

编辑：我刚注意到我想要做的事情有些特别。我并不总是知道所有元素是否都可见。因此，有时并非所有元素都会消失，只有一些元素会消失。但是，由于某些元素已经淡出，这将导致函数立即触发我相信。

Answer 1

http://jsfiddle.net/k6yg319o/

试试这个例子，它应该有效。只需确保DOM准备就绪！

$(function() {
    $('#test1, #test2, #test3').fadeOut(function() {
        $('#test3').show();   
    })
});

Answer 2

你可以使用回调函数，

$("#publish-left, #publish-right").fadeOut("slow", function(){
     //call back function executes are faded out
    //do something
});

Answer 3

你可以在没有回调的情况下运行第一个淡入淡出，如果它们以相同的速度褪色，则使用回调运行第二个淡入淡出。

Here's a fiddle.

$("#publish-left").fadeOut();
$("#publish-right").fadeOut(function () {
    alert("both fades finished since both fade at the same rate.");
});

或者如果你想使用不同的速度，你可以在每个完成时翻转一个开关，然后在第二个完成时运行回调。

Here's a fiddle

var faded1 = false;
var faded2 = false;

var callback = function(){ alert("both fades finished"); };

$("#publish-left").fadeOut(function(){
    faded1 = true;
    if(faded1 && faded2) callback();
});

$("#publish-right").fadeOut(function(){
    faded2 = true;
    if(faded1 && faded2) callback();
});

修改..
阅读你的评论后..

或者，如果其中一个可能已被隐藏，您可以查看它们是否都隐藏在您的回调函数中。

Here's another fiddle

var callback = function(){ // If either element is still visible, don't do anything. if($("#publish-left").is(":visible") || $("#publish-right").is(":visible")) return; // Otherwise, do something alert("both are hidden now"); }; // let's hide the first one right away for testing $("#publish-right").hide(); $("#publish-left").fadeOut(callback); $("#publish-right").fadeOut(callback);

Answer 4

检查fadeOut的{{3}}。

.fadeOut( [duration ] [, complete ] )

第一个参数需要一个持续时间，第二个参数是fadeOut完成后要执行的回调函数。

$("#publish-left, #publish-right").fadeOut(1000, function() {
   document.body.style.backgroundColor = 'blue'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="publish-left">Left</div>
<div id="publish-left">Right</div>

淡出两个元素，然后变为蓝色。

jQuery - 等待直到所有元素都淡出

4 个答案: