jQuery向上动画答案

【问题标题】：jQuery Animate UpwardsjQuery向上动画
【发布时间】：2010-07-18 15:01:59
【问题描述】：

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

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

当我写作时

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

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

也许有一种方法可以获取元素的 ypos 并在窗口加载时使用 jQuery.css() 设置顶部？

我应该在这里做什么？

【问题讨论】：

【解决方案1】：

只为bottom 属性设置动画怎么样？您可以获取文档的高度，然后将600 添加到它。

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。

【讨论】：

【解决方案2】：

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

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

【讨论】：