Question

您好我正在尝试在此网站上创建滑出标签：http://imaginationmuzic.com/

我指的是网站左侧和右侧的红色“联系我们”和蓝色“Twitter”标签。

目前，“联系我们”标签以自上而下的方式打开;我希望它像一个滑出的标签一样从左到右打开。

以下是我在标题中使用的代码：

$(document).ready(function(){
$(".btn-slide2").click(function(){
    $("#panel2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

我也希望在Twitter标签上做相反的事情（从左到右打开）。

任何帮助都将不胜感激。

Answer 1

我做的一些原始js代码演示。

<!DOCTYPE HTML> 
<html> 
<head> 
<!--Add style sheet-->
<link rel="stylesheet" type="text/css" href="soc.css">
<!--Add jquery-->
<script src="jquery-1.10.2.js">
</script>
<!--Add script for this page-->
<script src="soj.js">
</script>
 </head> 
 <body> 
<div id="container">

<div id="panel"> </div> 
<div id="contact"> </div>

</div> 
</body> 
<html>

------------- ---------- CSS

 #panel{ 
height:500px;
width:200px;
background-color:#EE4488;
 } 
#contact{ 
position:relative;
 top:-500px;
left:200px;
width:10px; 
height:50px; 
background-color:#22EEFF; 
} 
#container{ 
position:relative;
left:-200px;
}

------------ JS ---------

 $(document).ready(function(){
var pos='in';
$("#contact").click(function(){
if(pos=='in'){
  $("#container").animate({left:'0px'
});
  pos='out';
 }
else
{
$("#container").animate({left:'-200px'
});
pos='in';
} 
});
});

在网站上的JQuery或Javascript滑出选项卡

1 个答案: