jQuery - анимация, 'оставленная' позицию абсолютно расположенного отделения, когда сдвижная панель показана

У меня есть скрытая панель от левой стороны экрана, который скользит в представление о щелчке 'вкладки', расположенной на левую сторону экрана. Мне нужна панель для скольжения поверх существующего содержания страницы, и мне нужна вкладка для перемещения с ним. и таким образом, оба абсолютно расположены в CSS. Все хорошо работает, кроме мне нужны вкладка (и таким образом контейнер вкладки) для перемещения оставленный с панелью, когда это показано, таким образом, это, кажется, застревает к правой стороне панели. Его относительно простое при использовании плаваний, но конечно это влияет на расположение существующего содержания, следовательно абсолютное расположение. Я попытался анимировать оставленную должность контейнера панели (см., что зарегистрированный jQuery функционирует), но я не могу заставить это работать.

Это - пример исходного кода, который я изменил, как я могу заставить кнопку/вкладку скользить также?

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

Мой HTML

    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    


 
    

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    
  




    
        
 
    

Мой 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
    });
   });

  });

и это - 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;
}

Большое спасибо