jQuery animate a div while subsequently fading triggers in and out -

i've got menu bar slides across page when image clicked, , slides when alternate image clicked. i'd included fading just-clicked image out , fading unclicked image in menu bar animated. i'm sure can done dynamic function.. it's beyond understanding.

thank help!

html:

<div id="main">     <div id="trigger_left">         <img class="arrow_small" src="images/left_small.png" alt="slide menu out" />     </div>     <div id="trigger_right">         <img class="arrow_small" src="images/right_small.png" alt="slide menu in" />     </div>     <div id="slider">          <p>this content</p>     </div> </div> 

javascript:

$(document).ready(function() {     //page load     $('#slider').css({         width: '30px'     });     // navigation drop down menu     $('#trigger_left').click(function() {         $('#slider').animate({             width: '100%'         }, 1500);     });     $('#trigger_right').click(function() {         $('#slider').animate({             width: '30px',         }, 1500);         }      ); }); 

first of might want cache jquery objects improve performance , readability, might want add .stop() method halt current animation , fire new 1 current point rather seeing animations queueing , looping , acting weird. add .fadeout() , .fadein() on triggers when click occurs. ah , should used using .bind() rather .click(), .keydown() etc. these aliases bind method it's more efficient use bind directly. apart of it's easier use events namespaces bind , more. check jquery api!

var trigger_left = $('#trigger_left'),     trigger_right = $('#trigger_right'),     slider = $('#slider');  slider[0].style.width = "30px"; // , use native js can          //- speeds things , prepares when can't use jq :)  trigger_left.bind('click', function() {     trigger_left.stop().fadeout();     trigger_right.stop().fadein();     slider.stop().animate({         width: '100%'     }, 1500); }); trigger_right.bind('click', function() {     trigger_right.stop().fadeout();     trigger_left.stop().fadein();     slider.stop().animate({         width: '30px',     }, 1500);     }  );