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

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

<p>The <code>fadeOut</code> and the <code>fadeIn</code> run simultaneously, how do I make them run one after the other?</p>

[{'answer_id': 75194, 'author': 'neuroguy123', 'author_id': 12529, 'author_profile': 'https://Stackoverflow.com/users/12529', 'pm_score': 4, 'selected': False, 'text': '<p>What you want is a queue.</p>\n\n<p>Check out the reference page <a href="http://api.jquery.com/queue/" rel="nofollow noreferrer">http://api.jquery.com/queue/</a> for some working examples.</p>\n'}, {'answer_id': 75259, 'author': 'Jim', 'author_id': 8427, 'author_profile': 'https://Stackoverflow.com/users/8427', 'pm_score': 6, 'selected': True, 'text': '<p>You can supply a callback to the effects functions that run after the effect has completed.</p>\n\n<pre><code>$("#show-projects").click(function() {\n    $(".page:visible").fadeOut("normal", function() {\n        $("#projects").fadeIn("normal");\n    });\n});\n</code></pre>\n'}, {'answer_id': 23672352, 'author': 'niall.campbell', 'author_id': 323722, 'author_profile': 'https://Stackoverflow.com/users/323722', 'pm_score': 0, 'selected': False, 'text': '<p>Does there have to be a target? surely you can use a random target to queue events sequentially so long as the target is constant...below I\'m using the parent of an animation target to store the queue.</p>\n\n<pre><code>//example of adding sequential effects through\n//event handlers and a jquery event trigger\njQuery( document ).unbind( "bk_prompt_collapse.slide_up" );\njQuery( document ).bind( "bk_prompt_collapse.slide_up" , function( e, j_obj ) {\n    jQuery(j_obj).queue(function() {\n        //running our timed effect\n        jQuery(this).find(\'div\').slideUp(400);\n        //adding a fill delay to the parent\n        jQuery(this).delay(400).dequeue();\n    });\n});                     \n//the last action removes the content from the dom\n//if its in the queue then it will fire sequentially\njQuery( document ).unbind( "bk_prompt_collapse.last_action" );\njQuery( document ).bind( "bk_prompt_collapse.last_action" , function( e, j_obj ) {\n    jQuery(j_obj).queue(function() {\n        //Hot dog!!\n        jQuery(this).remove().dequeue();\n    });\n});\njQuery("tr.bk_removing_cart_row").trigger( \n    "bk_prompt_collapse" , \n    jQuery("tr.bk_removing_cart_row") \n);\n</code></pre>\n\n<p>Not sure if its possible but it seems like you could bind .dequeue() to fire when another jquery event fires, instead of firing inline in my example above? effectively halting an animation queue?</p>\n'}, {'answer_id': 26987154, 'author': 'brilliantairic', 'author_id': 586204, 'author_profile': 'https://Stackoverflow.com/users/586204', 'pm_score': 1, 'selected': False, 'text': '<pre><code>$( "#foo" ).fadeOut( 300 ).delay( 800 ).fadeIn( 400 );\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/75134', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/6967/']