Comment faire div déplacer à droite et à gauche en utilisant la méthode jQuery animate()?

Question

S'il vous plaît jeter un oeil à ceci:

http://jsfiddle.net/tmPfV/

Si vous faites un clic droit de la boîte se déplace à droite et à gauche si vous cliquez sur la boîte se déplace à gauche. Cependant si vous cliquez de nouveau à droite, rien ...

Comment puis-je le faire bouger à droite et à gauche autant de fois que je le veux au lieu de travailler pour un tour et de ne plus travailler?

Aussi si vous horlogez d'abord à gauche, puis à droite, il gâche également, comment résoudre ce problème?

jquery:

  $('.right').click(function(e) { 
       e.preventDefault(); 
       $('#foo').animate({ 
        'right' : '30px'  
       });     
      }); 
      $('.left').click(function(e) { 
       e.preventDefault(); 
       $('#foo').animate({ 
        'left' : '30px' 
       });     
      }); 

html:

 <a href="" class="left">left</a> | <a href="" class="right">right</a> 
     <br /><br /> 
     <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div> 

Answer 1

La deuxième fois, il essaie d'animer, il a déjà 30px bon positionnement gauche au-dessus de la première animation.

Quant à savoir pourquoi il saute au début de l'animation à gauche; le corps a un rembourrage, donc par défaut le bloc coulissant est en retrait avec rembourrage. Lorsque nous définissons la propriété left sur 0 au début de l'animation, elle saute en dehors du remplissage (à la position absolue de 0px gauche). Appliquer un remplissage de corps de 0px pour le réparer.

http://jsfiddle.net/MbJJ6/

  $('.right').click(function(e) { 
       e.preventDefault(); 
       $('#foo').css({ 'right': '0px', 'left': '' }).animate({ 
        'right' : '30px'  
       });      
      }); 
      $('.left').click(function(e) { 
       e.preventDefault(); 
       $('#foo').css({ 'right': '', 'left': '0px' }).animate({ 
        'left' : '30px' 
       });      
      }); 

Answer 2

utilisation très simple

<script src="jquery.min.js"></script> 
<script src="jquery-ui.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function() { 
      $("#left_panel").toggle("slide", { direction: "left" }, 1000); 
    }); 
}); 
</script>