How to make the function into order in jquery

Question

$("#maincontent").animate({"top":"450px"},1200)
     .html($("#"+Lidentity).html())
     .animate({"top":"0px"},1000);

Hi friends,

This is jquery code, which is working fine. As
1. animate maincontent top to 450px
2. get the content and placed into maincontent
3. again animate maincontent top to 0px.
this will give the effect similar to slide.

what's my problem is ? these are not comes in sequence. It jus works in the order of 2 1 3
i need it in 1 2 3 order.How can i achive it. br> please help me
Thanks,
Praveen J

Answer 1

You need to chain the calls together in the animate() callback ie:

$("#maincontent").animate({
  top: "450px"
}, 1200, function() {
  $(this).html($("#"+Lidentity).html()).animate({
    top: "0px"
  }, 1000);
});

Of course you can neaten it up a lot by using functions:

$("#maincontent").animate({"top":"450px"}, 1200, after_move);

function after_move() {
  $(this).html($("#"+Lidentity).html()).animate({
    top: "0px"
  }, 1000);
});

if that helps.

Answer 2

The animate functions are pseudo-asynchronous -- that is, they return immediately and schedule/perform the animation via setTimeout. You need to wait for the first animation to be done before you place the content into main content. This is achieved via a "callback," which is a function you tell animate to call as soon as its done. See other answers for code.