[jQuery] Chaining of display effects.

[jQuery] Chaining of display effects.


I've got two forms. When the page loads, both of the forms are hidden
from view with display: none;.
When Button1 is clicked, I want Form1 to appear.
When Button2 is clicked, I want Form2 to appear.
If Form1 is visible and Button1 is clicked, I want Form1 to disappear
and THEN I want Form2 to appear.
If Form2 is visible and Button2 is clicked, I want Form2 to disappear
and THEN I want Form2 to appear.
I can't seem to find a way to make these chain properly. If one of the
forms was visible from the get-go, it could work just fine, but
because in the beginning they're both hidden, it won't work. Here is
my code:
// Show Form1
$("#Button1").click(
    function(){
        // Hide the Form2 if necessary
        $("#Form2:visible").slideUp();
        $("#Form1:hidden").slideDown();
    });
// Show Form2
$("#Button2").click(
    function() {
        // Hide Form1 if necessary
        $("Form1:visible").slideUp();
        $("Form2:hidden").slideDown();
    });
Obviously the reason they are not "chaining" is because they're not
chained in the code, but if I did it like this:
$("Form1:visible").slideUp(function() {
    $("Form2:hidden").slideDown();
});
I would have the problem that I mentioned above where Form2 would only
appear if Form1 was already visible.
So, how can I make this work?