Javascript滑动标签从右侧不起作用

时间:2013-11-29 14:26:16

标签: javascript html css

我差不多在这个网站上创建了滑动标签: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>

感谢能够提供帮助的任何人!

1 个答案:

答案 0 :(得分:0)

如果您希望它回到原始位置,您想要动画回right: '0'而不是right: '-200px'

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

<强> CSS

body {
    overflow-x: hidden;
}