jquery - Firefox 中的正确位置和滚动条

Question

如果我为 div 位置设置动画，它会产生奇怪的运动。它只发生在 Firefox 中，如果我有一个正确的 div 并且有一个滚动条。为什么会发生，我该如何解决？

• 只有火狐
• 正确的位置
• 带滚动条

这里的例子简化检查：http: //jsfiddle.net/LhAEh/1/

HTML：

<div id="blue"></div>
<div id="red"></div>

CSS：

#red {
    position: fixed;
    bottom: 20px; right: 25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#blue {/*this div is just to create a scroll*/
    margin:0 auto;
    width:80px; height:500px;
    background:blue;
}

查询：

$(function(){

    $("#red").click(function() {
        $("#red").animate({bottom:'-80px'},1000);
    });

})

Answer 1

试试position: absolute;。

附加说明：我假设jQuery在开始动画之前animate()将位置更改为absolute，这会导致 Firefox 稍微移动对象，而不是将其留在原处。