jQuery .animate() 用底部属性改变顶部答案

【问题标题】：jQuery .animate() change top with bottom propertyjQuery .animate() 用底部属性改变顶部
【发布时间】：2025-11-27 09:45:01
【问题描述】：

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

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

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

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

【问题讨论】：

不管怎样，你小提琴中的第一个动画在 Firefox 5 上正确地将 <div> 向上移动。
是的，我在一秒钟前注意到了这一点。但是，这是我所知道的唯一可行的浏览器。
jsfiddle 上的演示似乎可以正常工作（我使用的是 FF 5）。你在哪个浏览器上测试过？
似乎也适用于 FF 3.6。但不在 Chrome 15.0.849.0 dev-m 或 IE8 上。（还有 Safari，我想。不是在我的开发机器上）也许是 jQuery 中的错误？还是只是浏览器不兼容？
当我从底部更改css时工作：20px；顶部：Chrome 中的 400 像素。这可能是 *.com/questions/2986353/… 的副本

标签： jquery jquery-animate

【解决方案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);
});

它基本上是这样工作的：

查找页脚的 offset().top 值
更改页脚的 CSS 使其与顶部：具有在 #1 中找到的值的属性。这使您可以为它的*属性设置动画，而不让它跳转。

【讨论】：