在Firefox中为固定位置居中的div设置动画时如何防止jquery动画水平位置跳转答案

【问题标题】：how to prevent jquery animation horizontal position jump when animating a fixed position centered div in firefox在Firefox中为固定位置居中的div设置动画时如何防止jquery动画水平位置跳转
【发布时间】：2013-06-03 17:30:01
【问题描述】：

我有一个页面，当使用 jquery animate 单击其标题栏时，该页面会从底部弹出一个框。

弹出框设置为固定位置，居中。在 chrome 中，当单击标题时，框会按预期滑出，但在 Firefox 中，它会在动画时跳到右侧。

firefox 中的 jquery 似乎存在某种错误，它决定了页面的宽度，包括 socrollbar。当有滚动条时，这会导致位置偏移，但我无法在保持弹出功能的同时解决它。

Firefox 和 Chrome 均已更新至最新版本。

here is a tinker.io link that demonstrates the issue

我还包含了演示中的代码：

#holder{
position:relative;
width:300px;
height:1400px;
margin:0 auto;
border:1px solid black;
}


#bar{
position:fixed;
width:300px;
height:200px;
border:1px solid #C0C0C0;
background-color:#C0C0C0;
bottom:-170px;
left:50%;
margin-left:-150px;
}

#header{
width:100%;
height:30px;
background-color:#600000;
}

<div id="holder"></div>

<div id="bar">
<div id="header"></div>
</div>

<script>
    var open = false;

    $("#header").click(function(){
    if (open == false){
    $("#bar").animate({
        "bottom" : "0px"
    });

    open = true;
    }else{
    $("#bar").animate({
        "bottom" : "-170px"
    });

    open = false;
    }
    });
</script>

【问题讨论】：

这与您的问题无关，但您在这里有一个错字： postion:relative; {位置}

标签： jquery css firefox jquery-animate css-position

【解决方案1】：

您可能想要修改 HTML，因为我在 http://tinker.io/e8bb6/9 更新了修补程序

<div id="holder">
    <div id="bar">
        <div id="header"></div>
    </div>
</div>

【讨论】：