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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个http://api.jquery.com/animate/

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

jQuery左右动画运动

3 个答案: