jquery glissement de la barre latérale de Gauche à droite

Je suis en train de créer un glissement de la barre latérale avec des effets similaires à

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

C'est dans quelle mesure j'ai écrit le code.Mais c'est saccadé.

  1. Quelqu'un peut proposer une meilleure solution aniamtions/assouplissement/toggle etc
  2. Je veux le code pour être indépendant de gauche paramètre c'est à dire $("#slide").css("left", "150 px");
    Il devrait être en mesure de glisser/de slide-out avec toutes sortes de div de largeur

Des idées ?

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>
InformationsquelleAutor django | 2013-04-01
  1. 10

    Vous avez besoin animate() méthode -

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

    Ici j'ai ajouté .stop() avant. Cela permettra d'effacer l'animation de la file d'attente qui se construit en raison de la souris se déplaçant rapidement.

    DÉMO

    • Merci @phobos.Il fonctionne comme je le voulais. Mais si j'ai passez la souris rapidement plusieurs fois sur le curseur de la div, il devient fou. De toute façon, nous pouvons résoudre ce problème ?
    • voir mise à jour de la réponse à se débarrasser de cet effet bizarre.
    • Je vous remercie une fois de plus.Maintenant, il se porte comme un charme.
    • excellente solution. +1
    InformationsquelleAutor SachinGutte