別的不說，先看效果圖吧

這是展開以后的效果圖

這是收縮以后的效果圖

用jQuery實現(xiàn)這個功能也就幾個函數(shù)就搞定了，來看看關(guān)鍵的代碼吧。

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>

首先要導(dǎo)入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的函數(shù)，代碼很簡單：

?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實現(xiàn)的動畫隱藏登陸框下載.rar

轉(zhuǎn)載于:https://www.cnblogs.com/psunny/archive/2009/07/02/1515844.html

總結(jié)

以上是生活随笔為你收集整理的一个很漂亮的jQuery动画隐藏登陆框，css很漂亮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。