jQuery - l'animation de "gauche" de position de position absolue div lorsque le panneau coulissant est révélé

J'ai un panneau caché au large de la côté gauche de l'écran qui coulisse dans la vue sur le clic sur un onglet' placé sur le côté gauche de l'écran. J'ai besoin de panneau pour la faire glisser sur le dessus de l'existant contenu de la page, et j'ai besoin de l'onglet à déplacer avec elle. et donc les deux sont absolument positionné dans le css. Tout fonctionne bien, à part j'ai besoin de l'onglet (et donc l'onglet conteneur) pour se déplacer à gauche avec le panneau lorsqu'il est révélé, de sorte qu'il semble être coincé à la droite du panneau. Son relativement simple lors de l'utilisation de flotteurs, mais bien sûr, cela affecte la mise en page du contenu existant, d'où un positionnement absolu. J'ai essayé de l'animation de la gauche de la position du panneau-conteneur (voir la documentation de jquery fonction), mais je ne peux pas le faire fonctionner.

Ceci est un exemple du code d'origine que j'ai changé, comment puis-je obtenir le bouton ou l'onglet de glisser aswell?

http://www.iamkreative.co.uk/jquery/slideout_div.html

Mon HTML

<div><!--sample page content-->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    </p>
</div>

<div id="panel" class="height"> <!--the hidden panel -->
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
    </div>  
</div>

<!--if javascript is disabled use this link-->
<div id="tab-container" class="height">
    <a href="#" onclick="return()">
        <div id="tab"><!-- this will activate the panel. --></div> 
    </a>
</div>

Mon jQuery

$(document).ready(function(){

$("#panel, .content").hide(); //hides the panel and content from the user

$('#tab').toggle(function(){ //adding a toggle function to the #tab
    $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px

    //THIS NEXT FUNCTION DOES NOT WORK -->
    function() {
        $('#tab-container').animate({left:"400px"} //400px to match the panel width
        });

    function() {
        $('.content').fadeIn('slow'); //slides the content into view.
        });  
},

function(){ //when the #tab is next cliked
    $('.content').fadeOut('slow', function() { //fade out the content 
        $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
    });
   });

  });

et c'est le css

#panel {
position:absolute;
left:0px;
top:50px;
background-color:#999999;
height:500px;
display:none;/*hide the panel if Javascript is not running*/
}

#panel .content {
width:290px;
margin-left:30px;
}

#tab-container{
position:absolute;
top:20px;
width:50px;
height:620px;
background:#161616;
}

#tab {
width:50px;
height:150px;
margin-top:100px;
display:block;
cursor:pointer;
background:#DDD;
}

Merci beaucoup

OriginalL'auteur Matt | 2010-04-19