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;
}

j查询:

$(function(){

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

})

Answer 1

尝试position: absolute;。

补充说明:我假设 jQuery 的animate() 在开始动画之前将位置更改为absolute，然后导致Firefox 移动对象一点，而不是将其留在原处。