javascript - jQuery animate 左右の動き

Question

jquery を使用.css()して、左の属性値を変更して div を左または右に移動しています。この変更が発生したときにアニメーション化する方法を探しています。jQueryUIの.show(slide)機能を試してみましたが、これは必要な120pxの動きだけでなく、div全体を動かします。

これは、アニメーションなしで動作している私の現在の機能です:

$('#plrt').live("click",function(){
    var lm=$('.plwid').css("left");
    lm = (parseInt(lm) + 120);
    $('.plwid').css("left", lm);    
});

これはスライド機能です。ピクセルの変更を移動するだけでなく、 div全体が からdisplay:hideに移動するため、適切に機能しませんdisplay:show

Answer 1

試すanimate()

$('#plrt').on("click",function(){
    $('.plwid').animate({ left: '+=120' }, 400 );
});

Answer 2

あなたが達成しようとしていることの簡単な例をまとめました。jQuery Animate
をチェックしてください。

//note live is deprecated
$('#plrt').on("click", function() {
  //perform custom animation to add 120px to current left CSS position
  $('.plwid').animate({
    left: '+=120'
  });
});

#plrt{
  position:relative;
  background:red;
  width:100px;
  height:100px;
  cursor:pointer;
}

.plwid{
  position:absolute;
  background:blue;
  width:100px;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="plrt"></div>
<div class="plwid"></div>

Answer 3

これを試してください http://api.jquery.com/animate/

$('#plrt').on('click', function() { 
    $('.plwid').animate({ left: '+=120', 5000 });     
});