Question

出于某种原因，我想要制作动画的DIV是从上到下制作动画...我想要将它从UP到最终目的地设置动画。

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

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

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

Answer 1

我认为这就是你想要的：

演示：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位于相对定位的元素内，则无效！

Answer 2

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

Answer 3

你可以搞乱这样的事情

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

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

jQuery：动画div从位置固定UP到另一个DIV

3 个答案: