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

【问题标题】：jQuery: Animate div from position fixed UP to another DIVjQuery：将 div 从固定位置 UP 动画到另一个 DIV
【发布时间】：2012-07-27 03:35:40
【问题描述】：

由于某种原因，我要制作动画的 DIV 是从上到下制作动画的……我想制作动画，从它向上到最终目的地。

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

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

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

【问题讨论】：

它来自哪里？页面底部？请添加更多信息。
固定在浏览器底部。

标签： jquery animation jquery-animate

【解决方案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 在相对定位的元素内，这将不起作用！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以搞砸这样的事情

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

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

【讨论】：