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

回答

相關問題