一个很漂亮的jQuery动画隐藏登陆框，css很漂亮
别的不说，先看效果图吧
这是展开以后的效果图
这是收缩以后的效果图
用jQuery实现这个功能也就几个函数就搞定了，来看看关键的代码吧。
1
<script type=”text/javascript” src=”js/pngfix/supersleight-min.js”></script>
2<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
3<script type=”text/javascript” src=”js/slide.js”></script>
2
3
首先要导入3个js文件，其中js/jquery-1.3.2.min.js是压缩以后的jQuery类库；
js/pngfix/supersleight-min.js是支持IE6的一个类库，是对图片进行处理的，它能消除那两个按钮图片的四周
（图片本来是长方形的，这里你看到的是圆角图片）。
然后就是下面的两个链接按钮了<a id=”open”>Log Id | Register</a>
和<a id=”close”>Close Panel</a>
1<div class=”tab”>
2 <ul class=”login”>
3 <li class=”left”> </li>
4 <li>Hello Guest!</li>
5 <li class=”sep”>|</li>
6 <li id=”toggle”>
7 <a id=”open” class=”open” href=”#”>Log In | Register</a>
8 <a id=”close” style=”display: none;” class=”close” href=”#”>Close Panel</a>
9 </li>
10 <li class=”right”> </li>
11 </ul>
12 </div>
2
3
4
5
6
7
8
9
10
11
12
第三个js文件里面写的就是jQuery的函数，代码很简单：
1
$(document).ready(function() 
{
2
// Expand Panel
3
$(“#open“).click(function(){
4 $(“div#panel“).slideDown(“slow“);//点击id为open的链接展开面板
5
});
6
7 // Collapse Panel
8 $(“#close“).click(function(){
9 $(“div#panel“).slideUp(“slow“); //点击id为的close链接隐藏面板
10 });
11
12 // Switch buttons from “Log In | Register” to “Close Panel” on click
13 $(“#toggle a“).click(function () {
14 $(“#toggle a“).toggle();//这个就是具有slideUp()和slideDown()双重效果
15 });
16
17
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这里有完整的程序：
版权声明：本文为psunny原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。