Question

我有一个带有框的页面，当使用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>

Answer 1

您可能希望修改HTML，因为我已在http://tinker.io/e8bb6/9

更新了修补程序

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

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

1 个答案: