jQuery .animate（）用bottom属性更改top

Question

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

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

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

一个简单的解决方法是将我的div的css更改为具有top属性，但我的设计需要bottom属性。有任何想法吗？

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. 找到页脚的偏移量（）。顶部值
2. 更改页脚的CSS，使其绝对定位 top：具有＃1中找到的值的属性。这可以让你 动画它的顶级属性，而不会跳跃。