jQuery FadeOut many divs at once

Question

I am trying to fade out multiple divs at once and fade in one div after that completes. Here's 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, the fadeOut and fadeIn happen at the same time.

Question: How do I get the fadeIn after the fadeOut?

Thank you

@Marc: "A does not work. A* does." The implied question is probably, "why does A not work if A* does and how do I get it to work the same way?" — Armatus, Apr 22 '12 at 23:18
Basically, I am trying to fade out multiple divs at once and fade in one div after that completes. The code above will fadeIn as it is fading out — Vinny, Apr 22 '12 at 23:20

score 17 · Accepted Answer · edited Oct 10 '14 at 14:00

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

is working immediately because it's starting to work when the first element (#solar-about in your example) fadeOut animation is completed.

If you want to wait until all animations are completed than you can use .promise(), like this:

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

jQuery FadeOut many divs at once

1 Answers1