jQuery 动画向上

Question

我有一个问题，我有一个绝对定位的 div，我想在页面上向上设置它的动画(我正在设置一个人跳出屏幕的动画)。

但是，我需要元素位于 bottom: 0，但是当我希望动画结束时，我希望图像具有 top: -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/