Help! How to get contents loaded first before doing anything?

this is part of my code:

// part 1
$('#igPanel .pre').html(contentsLoadHere).addClass('panelShow').removeClass('pre').attr('panelNum',panelNum);

// part 2
$('<div style="  width:0; border:2px solid #FFF; float:left; color:#FFF;" class="slider pre">empty</div>').prependTo('#igPanel').animate({width:200}, function(){

    $('#igPanel .next').remove();
    $('#igPanel .slider:last').html('empty').removeClass('panelShow').addClass('next').removeAttr('panelNum');
});

and I want the part 2 executes after the part 1 was finished. Because I want the开发者_C百科 contents in part 1 "html(contentsLoadHere)" loaded first.

Thank you very much!!

You need the queue method http://api.jquery.com/queue/

// part 1
$('#igPanel .pre').
   queue(function(next){
      $(this).
         html(contentsLoadHere).
         addClass('panelShow').
         removeClass('pre').
         attr('panelNum',panelNum);
         next();
   }).
   queue(function(next){
      $('<div style="  width:0; border:2px solid #FFF; float:left; color:#FFF;" class="slider pre">empty</div>').
          prependTo('#igPanel').animate({width:200}, function(){
              $('#igPanel .next').remove();
              $('#igPanel .slider:last').
                    html('empty').
                    removeClass('panelShow').
                    addClass('next').
                    removeAttr('panelNum');
          });
      next();
   });

$('document').ready(function(){
    // ...
    // Your code here
    // ...
});

Maybe this helps. It waits for the whole document to be ready to be manipulated and then starts your code. Maybe that it doesn't work right now, because the document is not ready. So just try that :)