Hiding then showing a div using jQuery

Question

I want to slideUp some divs, then slideDown 1 div. However, I'm having some issues.

$("#divDocument,#divLocation").slideUp("normal", function()
    { $("#divSearch").slideDown("normal", doStuff()); });

With this code, divDocument is visible, divLocation isn't. Because the divLocation is already hidden the doStuff() event fires immediately, even though divDocument isn't hidden yet.

$("#divDocument).slideUp("normal", function()
    { $("#divSearch").slideDown("normal", doStuff()); });

This code works fine, as it waits until divDocument is fully hidden before calling doStuff(). Am I using the multiple element selector wrong here? Am I doing something else incorrectly?

Answer 1

If divLocation is already visible, why not hide it first?

$("#divDocument,#divLocation").hide().slideUp("normal", function() { 
    $("#divSearch").slideDown("normal", doStuff()); 
});

EDIT:
Sorry, I got confused. slideUp is meant to HIDE the elements. For some reason I thought it was meant to show them. In that case, you could do this:

$("#divDocument,#divLocation").filter(':visible').slideUp("normal", function() { 
    $("#divSearch").slideDown("normal", doStuff()); 
});

With the :visible filter it would only do the slideUp on whichever element(s) are visible so they can then be hidden with slideUp. I am guessing this is what you are looking for since there's no point in hiding an already hidden element. If you want to momentarily show the hidden one and then slideUp it, you can just switch my original answer from hide() to show() and then do the slideUp.

Answer 2

Here is the code I ended up using. Thanks, Paolo, for pointing me in the right direction with the filter.

var o = $("#divDocument,#divLocation").filter(':visible');
if (o.length > 0) {
    o.slideUp("normal",
    function() {
     $("#divSearch").slideDown("normal", doStuff);
    });
}
else {
    doStuff();
}