一个很漂亮的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 >

首先要导入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

转载于:https://www.cnblogs.com/psunny/archive/2009/07/02/1515844.html