jQuery animate（）メソッドを使って左右にdivを移動する方法は？あなたはボックスが右に移動し、右クリックした場合</p> <p><a href="http://jsfiddle.net/tmPfV/" rel="nofollow">http://jsfiddle.net/tmPfV/</a></p> <p>し、左のボックスの動きを左クリックした場合：

Question

はこれを見てみてください。しかし、もう一度右クリックすると、何も...

1ラウンドではなく、もう一度作業しないで、何度でも左右に移動できますか？

また、最初に時計を左にしてから右に回すと、それを解決する方法もありますか？

の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

それがアニメーション化しようと二度目、それが既に30px右位置決め最初のアニメーションから残っています。

左のアニメーションの先頭でジャンプする理由は？ボディにはパディングがあるので、デフォルトではスライディングブロックはパディングでインデントされています。アニメーションの開始時にleftプロパティを0に設定すると、パディングの外側（0pxの絶対位置）にジャンプします。 0pxのボディパッディングを適用して修正します。

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

非常に簡単な使用

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