jQuery：Animate div从位置固定到另一个DIV

出于某种原因，我想动画的DIV从上到下都是动画...我想从它到达最终目的地的位置对它进行动画处理。jQuery：Animate div从位置固定到另一个DIV

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

这是我在做什么现在：围绕

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

来源

2012-07-27 dcolumbus

它从哪里来？页面的底部？请添加更多信息。 – 2012-07-27 03:40:27

它固定在浏览器的底部。 – dcolumbus 2012-07-27 03:45:28

我认为这就是你想要的：

演示：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-27 03:57:17

你乱用这样的

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

这将动画为300像素的少，动起来（我认为这是你想要的）

来源

2012-07-27 03:43:10

不，这不起作用。：/ – dcolumbus 2012-07-27 03:49:48

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

来源

2012-10-17 01:26:57

jQuery：Animate div从位置固定到另一个DIV

回答

相关问题