Question

我的div位于top: 0px和right: 0px，我想使用jquery的.animate()将其当前位置设置为left: 0px。怎么做到这一点？我似乎无法让这个工作：

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

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

谢谢！

Answer 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");

Answer 2

这对我有用

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

Answer 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/

Answer 4

所以.animate方法只有在你给一个元素赋予一个位置属性时才有效，如果它没有移动？

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

Answer 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 );

使用jQuery .animate从右到左动画div？

5 个答案: