Question

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 contents in part 1 “html(contentsLoadHere)” loaded first.

Thank you very much!!

Answer 1

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