JQuery - animating the "left" position of an absolutely positioned div when a sliding panel is detected

Question

I have a hidden panel on the left side of the screen that slides into the field of view by clicking on the “tab” located 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 along with it. and therefore both are absolutely positioned in css. Everything works fine, besides, I need a tab (and thus a taboo container) to move left with the panel when it opens, so it seems to get stuck on the right side of the panel. This is relatively simple when using floats, but, of course, it affects the layout of existing content, and therefore, absolute positioning. I tried animating the left position of the container bar (see the jquery Documentary Function), but I can't get it to work.

This is an example of the source code that I changed, how can I make the button / tab slide in the same way?

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

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

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

and this is 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; } 

Many thanks

Answer 1

I started from scratch and actually read jQuery docs hehe. I put both the panel and the button in an absolutely positioned div, floating both. Give the container a negative left position, then set jQuery to switch to the button.

 $('#button').toggle(function() { $('#slider').animate({ left: '+=200' }, 458, 'swing', function() { // Animation complete. CALLBACK? }); }, function() { $('#slider').animate({ left: '-=200' }, 458, 'swing', function() { // Animation complete. CALLBACK? }); }); 

Answer 2

I stumbled upon this message while trying to accomplish the same task.

Unfortunately, Matt's answer will no longer work with the latest version of jQuery. At the time Matt's answer was written, jQuery had two functions. At the time I write this, the one used in his answer is out of date. If Matt code is used, the whole div will just disappear, the button and that’s it. (And if you look like me, it will be very confusing until you delve into the api documentation and find out about the change)

I got the opportunity to work with the following code:

HTML:

 <div id="siteMap"> <div id="mapButton">Site Map</div> <div id="theMap">[The Site Map Goes Here]</div> </div> 

CSS (I know this is not very clean yet):

 #siteMap { width:500px; position:fixed; left:-500px; top:157px; display:block; color:#FFF; z-index:2; opacity: 0.95; } #siteMap #mapButton { display:block; color:#333; background-color:#ACACAC; padding:2px 5px; height:20px; width:70px; text-align:center; position:relative; left: 100%; margin-top:80px; cursor:pointer; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); } #siteMap #theMap { width:100%; height:350px; background-color:#666; margin-top:-104px; } 

And finally JavaScript:

 <script type='text/javascript'> $(document).ready(function() { $('#mapButton').click(function() { var mapPos = parseInt($('#siteMap').css('left'), 10); if (mapPos < 0) { $('#siteMap').animate({ left: '+=500' }, 458, 'swing', function() { // Animation complete. }); } else { $('#siteMap').animate({ left: '-=500' }, 458, 'swing', function() { // Animation complete. }); } }); }); </script> 

I hope if you came here from Google, my post will be useful :)