别的不说，先看效果图吧

这是展开以后的效果图

这是收缩以后的效果图

用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>

首先要导入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">&nbsp;</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">&nbsp;</li>
11        </ul>
12    </div>

第三个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});

这里有完整的程序：

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

• jquery
• css