jQuery - wait untill all elements are faded out

Question

I have the following problem: I want something to happen after two elements have been faded out. They are supposed to fade out at the same time:

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

However this doesn't seem to do what I want. How do I get my script to fade out two elements and then do something?

Edit: I just noticed there is something special about what I want to do. I don't always know if all elements are visible. So sometimes not all elements will be faded out, only some. However since some elements are already faded out, this will cause the function to trigger immediately I believe.

Possible duplicate of [Fading multiple elements simutaneously - jquery](http://stackoverflow.com/questions/6952556/fading-multiple-elements-simutaneously-jquery) — James Tobin, Nov 30 '15 at 15:57

score 0 · Answer 1 · answered Nov 30 '15 at 15:58

0

http://jsfiddle.net/k6yg319o/

Try the example, it should work. Just make sure the DOM is ready!

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

answered Nov 30 '15 at 15:58

Chris

26
4

score 0 · Answer 2 · answered Nov 30 '15 at 15:59

0

you can use callback function,

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

answered Nov 30 '15 at 15:59

Azad

5,144
4
28
56

I wrestled a bear once. · Answer 3 · 2015-11-30T17:20:03.853

You could just run the first fade without the callback and run the second one with the callback if they are both fading at the same speed.

Here's a fiddle.

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

Or if you want to use separate speeds you could flip a switch when each one is finished and then run the callback when the second one finishes.

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

Edit..
after reading your comment..

Or if one of them may already be hidden, you could just check to see if they're both hidden in your callback function..

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);

I just noticed I didn't mention one thing, that actually is quite important. Sometimes one of the two elements is disabled. So I actually can't do it like in your first example, because it is possible that #publish-right is already faded out. So I want my code to fade out both elements, if they are visible, or only the one that is visible. And wait until all is faded out. Maybe I should simply add a "dummy" element, that is always visible but doesn't show anything? — TheKidsWantDjent, Nov 30 '15 at 16:18

score 0 · Answer 4 · answered Nov 30 '15 at 16:24

Check the docs for fadeOut.

.fadeOut( [duration ] [, complete ] )

First parameter takes a duration, second is a callback function to execute after fadeOut is complete.

$("#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>

Fade out both elements, then turn blue.

jQuery - wait untill all elements are faded out

4 Answers4