2010-07-18 67 views
1

我有一個問題,我有一個絕對定位的div,我想將它從頁面向上設置爲動畫(我正在爲從屏幕上跳下的人設置動畫)。jQuery動畫向上

但是,我需要的元素是底部:0,但是當我想動畫完成時,我希望圖像具有頂部:-600px。

當我寫

$("#jumper").animate({ 
    top: "-600px" 
}, 2000, 'easeInBack'); 

它設置頂部頂部爲0,然後啓動動畫。

也許有一種方法可以獲取元素的ypos並在窗口加載時使用jQuery.css()設置頂部?

我應該在這裏做什麼?

回答

2

只是動畫bottom財產怎麼樣?您可以獲取文檔的高度,然後添加600

http://jsfiddle.net/kavY4/

var height = $(document).height(); 

$("#jumper").animate({ 
    bottom: height + 600 
}, 2000, 'easeInBack'); ​ 

否則,你碰上其中top計算爲auto瀏覽器的具體問題,以及動畫試圖從位置(這最終是0,我猜的)開始。

要做這項工作,您必須在動畫之前手動獲取#jumper的頂部位置並手動將top屬性設置爲該值。

var top = $('#jumper').offset().top; 

$("#jumper").css({top:top, bottom:'auto'}) 
.animate({ 
    top: -600 
}, 2000, 'easeInBack'); 

編輯:所需bottom第二個例子被設置爲auto爲好。

http://jsfiddle.net/kavY4/1/

0

這裏是你的代碼的例子:http://www.jsfiddle.net/fJKah/

看起來有望我的工作。也許別的什麼是干擾..

+0

這似乎http://www.jsfiddle.net/fJKah/1/並沒有對我的工作。順便說一句,我使用Chrome瀏覽器,但它應該沒關係。 – maletor 2010-07-18 15:12:19