views:

4476

answers:

3

How do I have two effects in jQuery run in sequence, not simultaneously? Take this piece of code for example:

$("#show-projects").click(function() {
    $(".page:visible").fadeOut("normal");
    $("#projects").fadeIn("normal");
});

The fadeOut and the fadeIn run simultaneously, how do I make them run one after the other?

+1  A: 

Check out this tutorial (towards the bottom)

http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=78

Justin Rudd
+9  A: 

What you want is a queue.

Check out the reference page http://docs.jquery.com/Effects/queue for some working examples.

dbrien
+12  A: 

You can supply a callback to the effects functions that run after the effect has completed.

$("#show-projects").click(function() {
    $(".page:visible").fadeOut("normal", function() {
        $("#projects").fadeIn("normal");
    });
});
Jim