1

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

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

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

Firefox 和 Chrome 都更新到最新版本。

这是一个 tinker.io 链接，它演示了这个问题

我还包括演示中的代码：

#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>
4

1 回答 1

2

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

<div id="holder">
    <div id="bar">
        <div id="header"></div>
    </div>
</div>
于 2013-06-03T17:44:40.380 回答