使用 jQuery .animate 从右到左为 div 设置动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3042092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using jQuery .animate to animate a div from right to left?
提问by Alex
I have a div absolutely positioned at top: 0pxand right: 0px, and I would like to use jquery's .animate()to animate it from it's current position to left: 0px. How does one do this? I can't seem to get this to work:
我有一个绝对定位在top: 0pxand的 div right: 0px，我想使用 jquery.animate()将它从当前位置动画到left: 0px. 如何做到这一点？我似乎无法让这个工作：
$("#coolDiv").animate({"left":"0px"}, "slow");
Why doesn't this work and how does one accomplish what I am looking to do?
为什么这不起作用以及如何完成我想要做的事情？
Thanks!!
谢谢！！
回答by user113716
I think the reason it doesn't work has something to do with the fact that you have the rightposition set, but not the left.
我认为它不起作用的原因与您right设置了位置而不是left.
If you manually set the leftto the current position, it seems to go:
如果手动设置left为当前位置，好像是这样：
Live example:http://jsfiddle.net/XqqtN/
实例：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");
EDIT:
编辑：
Appears as though Firefox behaves as expected because its calculated leftposition is available as the correct value in pixels, whereas Webkit based browsers, and apparently IE, return a value of autofor the left position.
看起来 Firefox 的行为与预期一致，因为其计算出的left位置以像素为单位提供了正确的值，而基于 Webkit 的浏览器，显然是 IE，返回auto左侧位置的值。
Because autois not a starting position for an animation, the animation effectively runs from 0 to 0. Not very interesting to watch. :o)
因为auto不是动画的起始位置，动画有效地从 0 运行到 0。观看不是很有趣。:o)
Setting the left position manually before the animate as above fixes the issue.
如上所述在动画之前手动设置左侧位置可解决此问题。
If you don't like cluttering the landscape with variables, here's a nice version of the same thing that obviates the need for a variable:
如果你不喜欢用变量弄乱环境，这里有一个很好的版本，它不需要变量：
$("#coolDiv").css('left', function(){ return $(this).offset().left; })
.animate({"left":"0px"}, "slow"); ?
回答by Abhishek Goel
This worked for me
这对我有用
$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
回答by artlung
Here's a minimal answer that shows your example working:
这是显示您的示例工作的最小答案：
<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>
Original Answer:
原答案：
You have:
你有：
$("#coolDiv").animate({"left":"0px", "slow");
Corrected:
更正：
$("#coolDiv").animate({"left":"0px"}, "slow");
Documentation: http://api.jquery.com/animate/
回答by Alessandro Violante
so the .animate method works only if you have given a position attribute to an element, if not it didn't move?
所以 .animate 方法只有在你给一个元素一个 position 属性时才有效，否则它不会移动？
for example i've seen that if i declare the div but i declare nothing in the css, it does not assume his default position and it does not move it into the page, even if i declare property margin: x w y z;
例如，我已经看到，如果我声明了 div，但我在 css 中没有声明任何内容，它不会假定他的默认位置，也不会将其移动到页面中，即使我声明了属性边距：xwyz；
回答by freeworlder
If you know the width of the child element you are animating, you can use and animate a margin offset as well. For example, this will animate from left:0 to right:0
如果您知道要设置动画的子元素的宽度，则还可以使用边距偏移并设置动画。例如，这将从 left:0 到 right:0 进行动画处理
CSS:
CSS：
.parent{
width:100%;
position:relative;
}
#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}
Javascript:
Javascript：
$( "#itemToMove" ).animate({
"margin-right": "0",
"right": "0"
}, 1000 );
