使用jQuery .animate从右到左为div设置动画?

我有一个绝对位于3007020488058209209和right: 0px的div,我想使用jquery的.animate()将其从当前位置动画化为left: 0px。这是怎么做的? 我似乎无法使它正常工作:

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

为什么这项工作不起作用?如何完成我想要做的事情?

谢谢!!

Alex asked 2020-08-11T18:21:42Z
5个解决方案
50 votes

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

如果您将auto手动设置为当前位置,似乎可以:

实时示例:[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的计算值auto可作为像素的正确值提供,因此Firefox似乎表现出预期的效果,而基于Webkit的浏览器(显然是IE)为左侧位置返回值auto

因为auto不是动画的开始位置,所以动画有效地从0开始运行到0。观看起来不是很有趣。 :o)

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


如果您不喜欢用变量来弄乱风景,这是同一件事的一个不错的版本,它消除了对变量的需要:

$("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");    ​
user113716 answered 2020-08-11T18:22:19Z
6 votes

这对我有用

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
Abhishek Goel answered 2020-08-11T18:22:39Z
5 votes

这是显示您的示例正常工作的最小答案:

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

artlung answered 2020-08-11T18:23:16Z
1 votes

因此.animate方法仅在为元素赋予了position属性时才有效,否则就不会移动?

例如,我已经看到,如果我声明了div但在CSS中未声明任何内容,即使我声明了属性margin:x w y z,它也不会假定其默认位置并且也不会将其移入页面。

Alessandro Violante answered 2020-08-11T18:23:41Z
1 votes

如果知道要设置动画的子元素的宽度,则也可以使用边距偏移量并为其设置动画。 例如,这将从左: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 );
freeworlder answered 2020-08-11T18:24:09Z
translate from https://stackoverflow.com:/questions/3042092/using-jquery-animate-to-animate-a-div-from-right-to-left