title: jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed
body: <p>I have a hidden panel off the left side of the screen which slides into view on the click of a 'tab' positioned on the left side of the screen.  I need the panel to slide over the top of the existing page content, and I need the tab to move with it. and so both are absolutely positioned in css.  Everything works fine, apart from I need the tab (and thus the tab-container) to move left with the panel when it is revealed, so it appears to be stuck to the right-hand-side of the panel. Its relatively simple when using floats, but of course this affects the layout of the existing content, hence absolute positioning.  I have tried animating the left position of the panel-container (see the documented jquery function), but I cant get it to work.</p>
  
  <p>This is an example of the original code which i have changed, how can I get the button/tab to slide aswell?</p>
  
  <p><a href="http://www.iamkreative.co.uk/jquery/slideout_div.html" rel="noreferrer">http://www.iamkreative.co.uk/jquery/slideout_div.html</a></p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div&gt;&lt;!--sample page content--&gt;
      &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="panel" class="height"&gt; &lt;!--the hidden panel --&gt;
      &lt;div class="content"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore&lt;/p&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;!--if javascript is disabled use this link--&gt;
  &lt;div id="tab-container" class="height"&gt;
      &lt;a href="#" onclick="return()"&gt;
          &lt;div id="tab"&gt;&lt;!-- this will activate the panel. --&gt;&lt;/div&gt; 
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jQuery</p>
  
  <pre><code>$(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 --&gt;
      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
      });
     });
  
    });
  </code></pre>
  
  <p>and this is the css</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Many thanks</p>