jquery: stop everything happening at once
<p>I am just learning jquery, and it took me ages of browsing the jquery api site to create these few lines of code. What I want to do is use ajax to load content from another page and put it into an existing div. currently, the code works but when I click on a link all the steps get executed in one go, so its doing the load() function while the #content div is sliding up...</p>

<p>What I want it to do is to each line step by step, so after one line finishes THEN the next line starts (eg #content div slides up and then the things inside #content get deleted, but currently, #content div gets empty before it finishes sliding up)</p>

<pre><code>$(document).ready(function(){

  $("#nav a").click(function(event){
    event.preventDefault();
    $("#content").slideUp();
    $("#content").empty();
    var navlink = $(this).attr("href");
    $("#content").load(navlink + " " + "#content");
    $("#content").slideDown();

  })


});
</code></pre>
