代码之家 › 专栏 › 技术社区 › Alex

使用jquery.animate从右到左设置一个div的动画?

jquery-animate jquery

Alex · 技术社区 · 14 年前

我的一个分区绝对位于 top: 0px 和 right: 0px ,我想使用jquery的 .animate() 将其从当前位置动画到 left: 0px . 怎么做到的?我似乎不能让它发挥作用:

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

为什么这不起作用,一个人如何完成我想要做的?

谢谢!!

5 回复 | 直到 9 年前

user113716 14 年前

我认为它不起作用的原因与你 right 位置设置,但不是 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的行为和预期一样,因为它的计算结果 左边 位置是以像素为单位的正确值,而基于WebKit的浏览器,显然是返回 auto 对于左侧位置。

因为 汽车 不是动画的起始位置,动画有效地从0运行到0。看不太有趣。o)

在动画制作之前手动设置左侧位置可以解决此问题。

如果你不喜欢把风景和变量混在一起,这里有一个很好的版本,可以避免对变量的需求:

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

Abhishek Goel 10 年前

这对我有用

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

artlung 14 年前

下面是一个最小的答案,它显示了您的示例的工作情况:

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

Alessandro Violante 12 年前

所以.animate方法只在你给一个元素一个position属性的情况下有效,如果它没有移动的话?

例如,我已经看到,如果我声明了DIV,但在CSS中没有声明任何内容,那么它不会假定其默认位置,也不会将其移动到页面中,即使我声明了属性Margin:x w y z;

Colin R. Turner 9 年前

如果知道要设置动画的子元素的宽度,也可以使用并设置边界偏移的动画。例如,这将从左: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 );