jQuery fadeOut multiple divs one by one, then fadeIn all at the same time

Question

 $(document).ready(function(){ $('#divBTN').click(function(){ $("#div1").fadeOut(1000); $("#div2").fadeOut(2000); $("#div3").fadeOut(3000); $('#div1,#div2,#div3').fadeIn(4000); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="div1" style="width:70px; height:30px; background-color: green;"></div> <br> <div id="div2" style="width:70px; height:30px; background-color: green;"></div> <br> <div id="div3" style="width:70px; height:30px; background-color: green;"></div> <br> <button id="divBTN">Click Me!</button> 

As you can see, the div fades out one by one after the other which is what is expected, but when I am trying to fade them all in at the same time, it fades in one by one which is not right. I want them all to fade in at the same time.

Can someone please help me??

Answer 1

You need to wait for end of fadeOut and then fadeIn elements. So use complete function of fadeOut() that called when fading end and fadeIn elements in it.

 $('#divBTN').click(function(){ $("#div1").fadeOut(1000); $("#div2").fadeOut(2000); $("#div3").fadeOut(3000, function(){ $('#div1,#div2,#div3').fadeIn(4000); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div1" style="width:70px; height:30px; background-color: green;"></div><br> <div id="div2" style="width:70px; height:30px; background-color: green;"></div><br> <div id="div3" style="width:70px; height:30px; background-color: green;"></div><br> <button id="divBTN">Click Me!</button> 

Answer 2

Actually, you start fading-out all elements at the same time, but with differents animation speeds. If you want to fade they out one after another using the same animation speed, you will have to wait until each fade-out finishs before calling fadeOut() on another one. On the next example, I show how to generalize (to X numbers of consecutive elements) this animation using a recursive procedure.

 $(document).ready(function() { var fadeOutSpeed = 2000; var fadeInSpeed = 3000; var seqFadeOutThenFadeAllIn = function(elem) { // Check if exists a next element. if (!elem.length) { // Fade-in all elements. $(".custom-div").fadeIn(fadeInSpeed); } else { // Fade-out next element. elem.fadeOut(fadeOutSpeed, function() { seqFadeOutThenFadeAllIn(elem.next(".custom-div")); }); } } $('#divBTN').click(function() { // Start fading-out the first element in the set. seqFadeOutThenFadeAllIn($(".custom-div").first()); }); }); 

 .custom-div { width: 70px; height: 30px; margin-bottom: 20px; background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="div1" class="custom-div"></div> <div id="div2" class="custom-div"></div> <div id="div3" class="custom-div"></div> <button id="divBTN">Click Me!</button> 

Answer 3

As suggested by Mohammad, you can use the approach of waiting for one to finish the action and then fire the command for the next.

The following example would hide them one bye one and once all are hidden show them all:

$('#divBTN').click(function(){
    $("#div1").fadeOut(1000, function(){
        $("#div2").fadeOut(1000, function(){
            $("#div3").fadeOut(1000, function(){
                $('#div1,#div2,#div3').fadeIn(1000);
            });
        });
    });
});