jquery boczne przesuwne bar od lewej do prawej

Question

Próbuję utworzyć przesuwne boczny pasek z efektami podobnymi do

1. www.wookmark.com
2. http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm.

To jest, jak daleko napisałem kod. Jest to gwałtowne.

1. Czy ktoś może zaproponować lepsze rozwiązanie z aniamtions/złagodzenie/przełączyć itp
2. Chcę kod być niezależny od lewej parametru czyli $ ("# slide"). Css ("lewy", "-150px"); Powinien być w stanie wsuwać/wysuwać z szerokim zakresem szerokości podziałki

Jakieś pomysły?

CSS

#slide{ 
border:1.5px solid black; 
position:absolute; 
top:0; 
left:0; 
width:150px; 
height:100%; 
background-color:#F2F2F2; 
layer-background-color:#F2F2F2; 
} 

HTML

<div id="slide" style="left: -150px; top: 0px; width: 160px;"> 
    <p>Something here</p> 
</div> 

Jquery

<script> 
    jQuery(document).ready(function() { 
     $('#slide').mouseover(function() { 
      $("#slide").css("left", "0px"); 
     }); 

     $('#slide').mouseout(function() { 
      $("#slide").css("left", "-150px"); 
     }); 

    }); 
</script> 

Answer 1

TrzebaMetoda-

var width = $('#slide').width() - 10; 
$('#slide').hover(function() { 
    $(this).stop().animate({left:"0px"},500);  
    },function() {   
    $(this).stop().animate({left: - width },500);  
}); 

Tutaj dodano wcześniej .stop(). Spowoduje to wyczyszczenie kolejki animacji, która powstaje w wyniku szybkiego poruszania myszą.

DEMO