jQuery - Animation 'linke' position des absolut positionierten div -, als Schiebe-panel offenbart

Habe ich eine versteckte panel aus der linken Seite des Bildschirms, die die Dias in den Blick, auf die auf einem 'tab' positioniert sich auf der linken Seite des Bildschirms. Ich brauche das panel gleiten über die Oberseite der vorhandenen Inhalte auf der Seite, und ich brauche die Registerkarte, um sich mit Ihr zu bewegen. und so sind beide absolut positioniert in css. Alles funktioniert einwandfrei, außer ich brauche das tab (und damit die tab-Behälter) für die Bewegung nach Links mit dem panel, wenn es aufgedeckt wird, so scheint es zu sein, klebte an der rechten Seite des Bedienfelds. Relativ einfach, wenn Sie schwimmt, aber das wirkt sich natürlich auf das layout der bestehenden Inhalte, also die absolute Positionierung. Ich habe versucht zu animieren, die linke position des panel-Containers (siehe die dokumentierten jquery-Funktion), aber ich kann nicht ankommen es zu wirken.

Dies ist ein Beispiel für den ursprünglichen code, den ich verändert habe, wie kann ich die Schaltfläche/Registerkarte zu schieben aswell?

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

Meine 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>

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

  });

- und das ist die 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;
}

Vielen Dank