jQuery Animate向上

Question

我有一个问题，我有一个绝对定位的div，我想从页面向上动画它（我正在动画一个人从屏幕上跳下来）。

但是，我需要将元素设置为底部：0，但是当我希望动画完成时，我希望图像具有顶部：-600px。

写作时

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

它将top top设置为0，然后启动动画。

也许有办法在窗口加载时获取元素的ypos并使用jQuery.css（）设置顶部？

我该怎么办？

Answer 1

如何动画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/

Answer 2

以下是您的代码示例：http://www.jsfiddle.net/fJKah/

看起来像我预期的那样工作。也许其他东西在干扰..