JQuery fadeout many divs at once

Question

I am trying to immediately blur multiple divs and fade into one div after that. Here is the code:

if($(this).attr("id")==="benefits-button"){ $("#solar-about, #home-page, #process-page, #financing-page, #vendors-page, #consump-info-page, #smart-page, #wind-page, #about-page").fadeOut(750, function() { $("#benefits-page").fadeIn(750); }); } 

When there are multiple divs in the selector, fadeOut and fadeIn occur simultaneously.

Question: How to get fadeIn after fadeOut?

thanks

Answer 1

 $("#benefits-page").fadeIn(750); 

works immediately because it starts when the first element (# solar-about in your example) has completed the fadeOut animation.

If you want to wait for all animations to complete, you can use . prom () , for example:

 $("#solar-about, #home-page, #process-page, #financing-page, #vendors-page, #consump-info-page, #smart-page, #wind-page, #about-page").fadeOut(750).promise().done(function() { $("#benefits-page").fadeIn(750); }); 

Demo