别的不说，先看效果图吧

这是展开以后的效果图

这是收缩以后的效果图

用jQuery实现这个功能也就几个函数就搞定了，来看看关键的代码吧。

1<scripttype="text/javascript"src="js/pngfix/supersleight-min.js"></script>
2<scripttype="text/javascript"src="js/jquery-1.3.2.min.js"></script>
3<scripttype="text/javascript"src="js/slide.js"></script>

首先要导入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<divclass="tab">
2<ulclass="login">
3<liclass="left">&nbsp;</li>
4<li>HelloGuest!</li>
5<liclass="sep">|</li>
6<liid="toggle">
7<aid="open"class="open"href="#">LogIn|Register</a>
8<aid="close"style="display:none;"class="close"href="#">ClosePanel</a>
9</li>
10<liclass="right">&nbsp;</li>
11</ul>
12</div>

第三个js文件里面写的就是jQuery的函数，代码很简单：

1$(document).ready(function(){
2//ExpandPanel
3$("#open").click(function(){
4$("div#panel").slideDown("slow");//点击id为open的链接展开面板
5});
6
7//CollapsePanel
8$("#close").click(function(){
9$("div#panel").slideUp("slow");//点击id为的close链接隐藏面板
10});
11
12//Switchbuttonsfrom"LogIn|Register"to"ClosePanel"onclick
13$("#togglea").click(function(){
14$("#togglea").toggle();//这个就是具有slideUp()和slideDown()双重效果
15});
16
17});

这里有完整的程序：

/Files/psunny/jquery实现的动画隐藏登陆框下载.rar