使用jQuery .animate从右到左animationdiv？
我有一个绝对定位在top: 0px的div top: 0px和right: 0px ，我想使用jquery的.animate()从它的当前位置left: 0pxanimationleft: 0px 。 如何做到这一点？ 我似乎无法得到这个工作：
$("#coolDiv").animate({"left":"0px"}, "slow");
为什么不这样做，以及如何做到我期望做的事情？
谢谢！！
我认为它不起作用的原因与你有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不是animation的起始位置，所以animation有效地从0运行到0.不是很有意思。 ：O）
在上述animation之前手动设置左侧位置可以解决问题。
如果你不喜欢用variables混淆景观，这里有一个很好的版本，可以避免使用variables：
$("#coolDiv").css('left', function(){ return $(this).offset().left; }) .animate({"left":"0px"}, "slow");
这对我有效
$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
这是一个最小的答案，显示你的例子工作：
<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/
所以.animate方法的工作原理只有当你给一个元素的位置属性，如果不是它不移动？
例如我已经看到，如果我声明的股利，但我声明什么都没有在CSS中，它不会假设他的默认位置，它不会将其移动到页面，即使我声明财产保证金：xwyz;
如果您知道您正在animation的子元素的宽度，则还可以使用边界偏移量并设置animation效果。 例如，这将从左侧开始animation：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 );
