右侧的 Javascript 滑动选项卡不起作用

Question

我几乎完成了在这个网站上创建滑动标签:http://www.imaginationmuzic.com最后一步是右侧滑动标签没有正确滑动。正如您在它开始打开后看到的那样，单击后进一步打开，似乎在第 3 次后关闭，但确实使网站更宽，允许用户滚动以查看它隐藏...

这是我的代码:

CSS

#panel2{ 
height:500px;
width:200px;
background-color:#333;

 } 
#contact2{ 
position:relative;
 top:-400px;
right:40px;
width:40px; 
height:168px; 
background:url(/images/twitter-panel.png); 

} 
#container2{ 
position:relative;
right:0px;
z-index:5;
position:absolute;
top:110px;
}

Javascript

script type="text/javascript">
$(document).ready(function(){
var pos='in';
$("#contact2").click(function(){
if(pos=='in'){
  $("#container2").animate({right:'200px'
});
  pos='out';
 }
else
{
$("#container2").animate({right:'-200px'
});
pos='in';
} 
});
});


</script>

和 HTML:

<div id="container2">

<div id="panel2"></div> 
<div id="contact2"> </div>
</div>

感谢任何可以提供帮助的人!

Answer 1

如果你想让它回到原来的位置，你想动画回到 right: '0' 而不是 right: '-200px' 。

或者您可以将 overflow-x: hidden; 添加到主体以停止滚动。

CSS

body {
    overflow-x: hidden;
}