jQuery .animate()改变顶部与底部属性

Question

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

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

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

一个简单的修复将改变我的div的css有一个顶部属性，但我的设计需要底部属性。什么好主意吗?

Answer 1

要做到这一点有几个关键。这是一个jsFiddle的例子。

$('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. 查找页脚偏移量()。最高价值
2. 更改页脚的CSS，使其与Top:具有#1中找到的值的属性。这让你可以动画它的顶部属性，不让它跳跃。