jQuery为左右移动设置动画

Question

使用 jquery 的.css()我正在更改 left 属性值以向左或向右移动div。我正在寻找一种方法来在发生此更改时对其进行动画处理。 我尝试过的任何内容都没有工作，我尝试了 jQueryUI 的 .show(slide) 函数，但这会移动整个div，而不仅仅是我需要的 120px 运动。

这是我当前的函数，无需动画即可工作：

$('#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 });     
});