jQuery doing things in an order

Question

Hi All

How do I get things to run smoothly and in order based on my actions.

ie

var $content = $("#content");
$content.slideUp().html('');
$conten.html(from_my_ajax_request).slideDown(); 

Basically I have done an ajax request to place the content of div #content.

But running the above I can see the code come in but the slideUp does not finish before slideDown takes over. I would obviously like it to be smooth.

Hope you can help.

Answer 1

var $content = $("#content");
$content.slideUp(function() {
  $content.html('');
  $content.html(from_my_ajax_request).slideDown(); 
});

This way you use the callback to trigger the second part of your animation when the first is completed.

slideUp docs

Answer 2

You can pass a callback to slideUp and get that to execute the next step:

http://api.jquery.com/slideUp/

Or you could use the animate call:

http://api.jquery.com/animate/

Answer 3

.html() isn't queued (it happens immediately, independing of the fx queue), so either use the .slideUp() callback, like this:

$("#content").slideUp(function() { 
   $(this).html(from_my_ajax_request).slideDown(); 
});

This calls the .html().slideDown() once the .slideUp() is finished. Or .queue() it, like this:

$("#content").slideUp().queue(function(n) { 
   $(this).html(from_my_ajax_request); n();
}).slideDown();
//or...
$("#content").slideUp().queue(function() { 
   $(this).html(from_my_ajax_request).dequeue();
}).slideDown();

This actually puts the .html() call as an fx queue step, and it'll execute .slideDown() after it's complete.