How to control the sequence in which commands are executed

How to control the sequence in which commands are executed

I am a self thought web developer and am constantly having problems making sure that certain commands are finished executing before others are started.  My most recent problem is trying to append a large amount of data, to a div, then sliding it down slowly.  Since that data takes a while to append, the system is doing both at the same time, therefore not giving me the slide down effect.  Here is the code:

  1. $('#SomeDiv').append(data);
  2. $('#image1').animate({"left": "+=300px","top": "-=200px"}, "slow");
  3. $('#image2').animate({"left": "+=120px"}, "slow");
  4. $('#Image3').animate({"top": "+=250px","left": "+=300px"}, "slow");
  5. $('#Detail').remove();
  6. $('.cpage').css("background-color", "#F2F2F2");
  7. $('.cpage').animate({"height":"1130px"}, "slow");
Where "SomeDiv" is part of "cpage" and "data" is a large amount of images.  I would like to execute line 1 and then all the other lines simultaneously.  It is currently executing all of the simultaneously.

Thank you