jQuery .animate() 更改顶部和底部属性

Question

我正在使用 .animate() 在 jQuery 中构建一个菜单，但遇到了问题。我有一个 div，最初加载位置:固定和底部:30px。单击链接后，我希望我的 div 移动到该链接的高度位置。本质上，我有这个:

http://jsfiddle.net/wRjyK/32/

问题是第一个动画最初从屏幕顶部向下移动。 (因为它没有 top 属性)我希望动画从当前位置开始。当我使用其他链接重复动画时，它看起来很好，因为我的 div 现在有正确的 top 属性可以使用。

一个简单的修复方法是将我的 div 的 css 更改为具有顶部属性，但我的设计需要底部属性。有任何想法吗？

Answer 1

要实现这一目标，有几个关键点。这是 jsFiddle example .

$('a').click(function(){
    var offsetTop = $(this).offset().top;
    var footerOffsetTop = $('.footer').offset().top;
    $('.footer').css({position:'absolute',bottom:'',top:footerOffsetTop})
        .animate({top:offsetTop},500);
});

它的工作原理基本上是这样的:

1. 查找页脚的 offset().top 值
2. 更改页脚的 CSS，使其绝对定位在顶部:具有在 #1 中找到的值的属性。这可以让你为其顶部属性设置动画，但不让它跳跃。