javascript - jQuery动画左右移动

Question

使用 jquery.css()我正在更改左侧属性值以向左或向右移动 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 });     
});