Question

使用 jquery s . css () i 正在更改左属性值以移动 div 左或右。我正寻找一种方式在变化发生时对变化进行动画。没有试过任何效果, 试过 jQueryUI s .show( slide) 函数, 但这会移动整个 div, 而不是所需的 120 px 移动。

这是我目前没有动画的函数:

$( #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

I have whipped up a quick example of what I think you are trying to achieve.
You should check out 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

尝试此 < a href=> "http://api.jquery.com/animate/" rel="no follow" >http://api.jquery.com/animate/

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

友情链接