How to force the code to be executed inside the animate() function?

In my situation.A slider show! I got several elements appended and removed by button click event in my animate() function.

I want to make a contents slider show.I thought:

make three div elements:

first:  <div class='pre'></div>
second: <div class='currentShow'>contents</div> this is default display contents
three:  <div class='next'></div>

and four link witch load contents:

<a class="btPanel" panel="1">1</a>
<a class="btPanel" panel="2">2</a>
<a class="btPanel" panel="3">3</a>
<a class="btPanel" panel="4">4</a>

so.when I first click content loads link, such as "1", and then:

div with class "next" load the contents of "1", and then:

div with class "pre" animates the div width attibute to "0",so the div with class "currentShow" slides to left and showing the contents inside the div with class "next", and then:

I remove the div with class "pre" and make the original div with class　“currentShow" to be first div just like "pre",clear the contents,remove the class and add class, and final:

append the div with class "next" to the end.so ,all the html structure re-back the original and waiting for next slide.

the problem is: when I quick switch the contents.such as click the link 1 ,2 ,3,4 one by one quickly. the append and remove and add class and remove class didn't finish the job so I got multi "contents" and "pre","next" div exist at the end.

But, when I click and quick switch the animation.The code inside the animate() function which want to remove element didn't execute and keep the element exist.So,Is there a way to force the code 开发者_高级运维inside animate() function to be executed to the end!

html code:

<div style=" width:612px;  margin:0 auto; overflow:hidden;">
    <a href="" id="bt1" class="btPanel" panel="1" style="color:#FFF">panel 1</a>
    <a href="" id="bt2" class="btPanel" panel="2" style="color:#FFF">panel 2</a>
    <a href="" id="bt3" class="btPanel" panel="3" style="color:#FFF">panel 3</a>
    <a href="" id="bt4" class="btPanel" panel="4" style="color:#FFF">panel 4</a>
    <div id="igPanelWrap" style=" position:relative; height:30px; width:204px; overflow:hidden; margin:0 auto;">
        <div style=" position:absolute; width:612px;height:22px; margin:0 auto; overflow:hidden; left:-204px;" id="igPanel">
          <div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider pre">empty</div>
          <div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider currentShow ">2</div>
          <div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>
        </div>
    </div>
</div>

js code:

    $('.btPanel').click(function(event){

        event.preventDefault();

        var panelNum = parseInt($(this).attr('panel'));

        if($('#igPanel .panelShow').length){

            var currentPanelNum = parseInt($('#igPanel .panelShow').attr('panelNum'));

            if(currentPanelNum === panelNum)
                return;

            if( currentPanelNum > panelNum){

                $('#igPanel .pre').
                   queue(function(next){
                      $(this).
                         html(panelNum).
                         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();
                   });
            }
            else{

/*              $('#igPanel .next').html(panelNum).addClass('panelShow').removeClass('next').attr('panelNum',panelNum);
                $('#igPanel .pre').stop().animate({width:0}, function(){

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

                      $('#igPanel .pre').animate({width:0}, function(){

                                        $(this).remove();
                                        $('#igPanel .slider:first').html('empty').removeClass('panelShow').addClass('pre').removeAttr('panelNum');
                                        $('<div  style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>').appendTo('#igPanel');
                                    });
                      next();
                   });

            }
        }
        else{

            $('#igPanel .next').
               queue(function(next){
                  $(this).
                     html(panelNum).
                     addClass('panelShow').
                     removeClass('next').
                     attr('panelNum',panelNum);
                     next();
               }).
               queue(function(next){

                  $('#igPanel .pre').animate({width:0}, function(){

                                    $(this).remove();
                                    $('#igPanel .slider:first').html('empty').removeClass('panelShow').addClass('pre').removeAttr('panelNum');
                                    $('<div  style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>').appendTo('#igPanel');
                                });
                  next();
               });
        }
/*      
        $('.panelShow').each(function(){

                        if($(this).attr('display') === 'undefined')
                            $(this).remove();
                                      });
*/                           
    });

thank you very much!!

Try This, although I don't think this is the best way to be doing this, maybe look into a jQuery Carousel or something:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            .btPanel{background:#F00}
            .slider{background:#00F; width:200px; border:2px solid #FFF; float:left; color:#FFF; cursor:pointer}
            .next{}
            .currentShow{}
        </style>
        <script type="text/javascript" src="./scripts/jquery.js"></script>
        <script type="text/javascript">
            function changePanel(thisObj, panel)
            {
                animateWidth = parseFloat($('.currentShow').width());

                $('.currentShow').addClass('pre').removeClass('currentShow');
                //$('.next').addClass('currentShow').removeClass('next');

                $('#igPanel').append('<div class="slider currentShow">'+loadContent(panel)+'</div>');
                $('.pre').stop(true,true).animate({'width':"-="+animateWidth+"px"}, function(){
                    $('.pre').detach();
                });
            }

            function loadContent(panel)
            {
                switch(panel)
                {
                    case 'panel1':
                        return "Some Content for Panel 1";
                    break;
                    case 'panel2':
                        return "This is Panel 2";
                    break;
                    case 'panel3':
                        return "Another Panel, this is 3";
                    break;
                    case 'panel4':
                        return "Finally this is Panel 4";
                    break;
                }
            }
        </script>
    </head>
    <body>
        <div style=" width:612px;  margin:0 auto; overflow:hidden;">
            <span class="btPanel" onClick="changePanel(this, 'panel1')">panel 1</span>
            <span class="btPanel" onClick="changePanel(this, 'panel2')">panel 2</span>
            <span class="btPanel" onClick="changePanel(this, 'panel3')">panel 3</span>
            <span class="btPanel" onClick="changePanel(this, 'panel4')">panel 4</span>
            <div id="igPanelWrap" style=" position:relative; height:30px; width:204px; overflow:hidden; margin:0 auto;">
                <div style=" position:absolute; width:612px;height:22px; margin:0 auto; overflow:hidden;" id="igPanel">
                  <div class="slider currentShow">2</div>
                </div>
            </div>
        </div>
    </body>
</html>