我有一个带有框的页面,当使用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>
答案 0 :(得分:2)
您可能希望修改HTML,因为我已在http://tinker.io/e8bb6/9
更新了修补程序<div id="holder">
<div id="bar">
<div id="header"></div>
</div>
</div>