使用 jQuery .animate 从右到左为 div 设置动画？答案

【问题标题】：using jQuery .animate to animate a div from right to left?使用 jQuery .animate 从右到左为 div 设置动画？
【发布时间】：2011-03-03 19:04:37
【问题描述】：

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

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

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

谢谢！！

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

我认为它不起作用的原因与您设置了right 位置而不是left 的事实有关。

如果手动将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 值。

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

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

如果您不喜欢用变量使环境变得混乱，这里有一个很好的版本，它不需要变量：

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

【讨论】：

在我阅读 jQuery 源代码ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js 时，为了确定位置，jQuery 已经将元素位置标准化为“顶部”和“左侧”相对“引擎盖下” - 我相信你的答案是不正确的。例如，尽管 css 值设置为 right，并且 animate 值设置为 left，但我的示例仍然有效。
@artlung - 感谢您提供链接，但您在哪个浏览器中进行了测试？我在 Safari 中进行测试，如果不设置左侧位置，动画将无法正常工作。直接跳到左边，大概是因为left的初始值为auto。
在 Firefox 中测试并且运行良好。 Peculiar、Chrome 和 Safari 的行为确实如您所指。所以它正在 /change/ 到正确的位置，但它没有显示临时效果！添加 jQueryUI（据说它允许为普通 jQuery 无法实现的附加动画效果）对 Chrome 和 Safari 没有任何改变。
@artlung - 我自己也做了测试，结果相同。 Firefox 是完美的，但是 Webkit 和 IE7 & 8 需要左位置设置。（花了我这么长时间，因为 IE 吓坏了我。大惊喜。）
@artlung - 事实上，如果我在动画之前用$('#coolDiv').css('left'); 记录left 的位置，Firefox 会给我计算出的像素位置，而Webkit 浏览器给我auto。

【解决方案2】：

这对我有用

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");

【讨论】：

【解决方案3】：

这是显示您的示例有效的最小答案：

<html>
<head>
<title>hello.world.animate()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
#coolDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it.
    $("#coolDiv").animate({'left':0}, "slow");
    // So basically if you *start* with a right position
    // then stick to animating to another right position
    // to do that, get the window width minus the width of your div:
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow');
    // sorry that's so ugly!
});
</script>
</head>
<body>
    <div style="" id="coolDiv">HELLO</div>
</body>
</html>

原答案：

你有：

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

更正：

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

文档：http://api.jquery.com/animate/

【讨论】：

我真诚的道歉，但这是一个简单的复制/粘贴错误，不是问题。

【解决方案4】：

所以 .animate 方法只有在您为元素赋予位置属性时才有效，否则它不会移动？

例如，我已经看到，如果我声明了 div 但我在 css 中没有声明任何内容，它不会假定他的默认位置并且不会将其移动到页面中，即使我声明属性 margin:xwyz;

【讨论】：

【解决方案5】：

如果您知道要制作动画的子元素的宽度，您也可以使用边距偏移并制作动画。例如，这将从左：0 到右：0 进行动画处理

CSS：

.parent{
width:100%;
position:relative;
}

#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}

Javascript：

$( "#itemToMove" ).animate({
"margin-right": "0",
"right": "0"
}, 1000 );

【讨论】：