如何使用jQuery animate（）方法使div左右移动？

请看看这个：

http://jsfiddle.net/tmPfV/

如果单击右键，则框向右移动;如果单击左键，则框向左移动。 但是，如果你再次点击右边，没有…

我怎样才能让它在我喜欢的情况下左右移动多次而不是在一轮中工作然后不再工作？

此外，如果你先左，然后右，它也会搞砸，怎么解决？

jQuery的：

$('.right').click(function(e) { e.preventDefault(); $('#foo').animate({ 'right' : '30px' }); }); $('.left').click(function(e) { e.preventDefault(); $('#foo').animate({ 'left' : '30px' }); }); 

HTML：

  left | right 

 
 

Answer 1

它第二次尝试动画时，它已经从第一个动画中剩下30px左右定位。

至于它为何在左侧动画开始时跳跃; 正文有填充，所以默认情况下滑块是用填充缩进的。 当我们在动画开始时将left属性设置为0时，它会跳过填充（到0px左侧的绝对位置）。 应用0px的身体填充来修复它。

http://jsfiddle.net/MbJJ6/

  $('.right').click(function(e) { e.preventDefault(); $('#foo').css({ 'right': '0px', 'left': '' }).animate({ 'right' : '30px' }); }); $('.left').click(function(e) { e.preventDefault(); $('#foo').css({ 'right': '', 'left': '0px' }).animate({ 'left' : '30px' }); }); 

Answer 2

使用非常简单