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

时间:2013-06-03 17:30:02

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

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

1 个答案:

答案 0 :(得分:2)

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

更新了修补程序
<div id="holder">
    <div id="bar">
        <div id="header"></div>
    </div>
</div>