1

出于某种原因，我想要动画的 DIV 是自上而下的动画......我想将它从向上动画到最终目的地。

DIV 从position: fixed页面底部开始。

这就是我现在正在做的事情：

var div2Pos = $("#feature-header-wrapper").position();
$("#123456").css('position', 'absolute');
$("#123456").animate({top: div2Pos.top}, 1000);
4

3 回答 3

2

我认为这就是你想要的：

演示：http: //jsfiddle.net/SO_AMK/Q6KNk/

jQuery：

var div2Pos = $("#div2").position();
$("#square").css({
    position: 'absolute',
    top: $("#square").position().top,
    left: $("#square").position().left
});
$("#square").animate({
    top: div2Pos.top
}, 1000);​

HTML：

<div id="square">Lorem Ipsum...</div>
<div id="div2">Lorem Ipsum...</div>​

CSS：

#square {
    width: 100px;
    height: 100px;
    background-color: lightBlue;
    position: fixed;
    bottom: 0;
}
#div2 {
    width: 100px;
    height: 100px;
    background-color: lightGreen;
    position: relative;
    top: 30px;
}

基本上它获取div2' 位置然后设置#square为它的当前位置，但使用绝对而不是固定定位，以便动画发生而不是跳到顶部。

注意：square如果在相对定位的元素内，这将不起作用！

于 2012-07-27T03:57:17.683 回答
1

我也有同样的问题。但我的是在一个猎鸭游戏中，所以动画会触发几次，我想它可能会帮助你知道它只发生在第一次。之后，我正在制作动画的 div 保留我给它的位置并从下往上制作动画。所以如果我必须...我猜我可以添加一个额外的小动画，什么都不做。希望我能找到不那么平庸的东西，但我希望这会有所帮助。

于 2012-10-17T01:26:57.747 回答
0

你可以搞砸这样的事情

       $("#123456").animate({top: '-=300px'}, 1000);

这将动画到 300px 少，向上移动（我认为这就是你想要的）

于 2012-07-27T03:43:10.013 回答