jquery - 使用 jQuery .animate 从右到左为 div 制作动画？

Question

我有一个 div 绝对位于 top: 0px 和 right: 0px，我想使用 jquery 的 .animate()将其从当前位置移动到 left: 0px。如何做到这一点？我似乎无法让它工作:

$("#coolDiv").animate({"left":"0px"}, "slow");

为什么这不起作用以及如何完成我想要做的事情？

谢谢!!

Answer 1

我认为它不起作用的原因与您设置了右位置，但没有设置左位置有关。

如果你手动将left设置到当前位置，它似乎会去:

实例: http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left;  // Get the calculated left position

$("#coolDiv").css({left:left})  // Set the left to its calculated position
             .animate({"left":"0px"}, "slow");

<小时/>

编辑:

看起来 Firefox 的行为符合预期，因为其计算出的 left 位置可作为正确的像素值，而基于 Webkit 的浏览器(显然是 IE)返回 auto 值code> 为左侧位置。

因为 auto 不是动画的起始位置，所以动画实际上从 0 运行到 0。观看起来不太有趣。 :o)

按照上述方法在动画之前手动设置左侧位置可以解决该问题。

<小时/>

如果您不喜欢用变量弄乱环境，这里有一个很好的版本，可以消除对变量的需要:

$("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");    ​