右側的Javascript滑動選項卡不起作用

Question

我幾乎可以在以下網站上創建滑動選項卡： http : //www.imaginationmuzic.com ，最后一步是右側滑動選項卡無法正確滑動。 如您所見，它開始打開后，一鍵打開進一步打開，似乎在第三次之后關閉，但實際上使站點更寬，允許用戶滾動查看以使其隱藏...

這是我的代碼：

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: '-200px' right: '0'動畫right: '0'而不是right: '-200px' 。

或者您可以添加overflow-x: hidden; 到身體停止滾動。

CSS

body {
    overflow-x: hidden;
}