jquery: stop everything happening at once

Question

Hi,

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...

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)

$(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();

  })


});

Answer 1

most of the jquery functions accept callbacks.

Answer 2

Use the callback options:

$(document).ready(function(){

  $("#nav a").click(function(event){
    event.preventDefault();
    $("#content").slideUp("normal", function() {
      $("#content").empty()
       .load($(this).attr("href") + " " + "#content")
       .slideDown(); //Just so this won't wrap here, can be one line
    });    
  });
});

Answer 3

you need make use of the callback of ajax methods in jquery. in particular the callback method which executes when the page you are loading is finished or the onsuccess method which executes when the page you are loading displayed without errors. this ensurs that the sliding up will only occure after the page has loaded