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>