別的不說(shuō)，先看效果圖吧

這是展開(kāi)以后的效果圖

這是收縮以后的效果圖

用jQuery實(shí)現(xiàn)這個(gè)功能也就幾個(gè)函數(shù)就搞定了，來(lái)看看關(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個(gè)js文件，其中js/jquery-1.3.2.min.js是壓縮以后的jQuery類(lèi)庫(kù)；
js/pngfix/supersleight-min.js是支持IE6的一個(gè)類(lèi)庫(kù)，是對(duì)圖片進(jìn)行處理的，它能消除那兩個(gè)按鈕圖片的四周
（圖片本來(lái)是長(zhǎng)方形的，這里你看到的是圓角圖片）。

然后就是下面的兩個(gè)鏈接按鈕了<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>

第三個(gè)js文件里面寫(xiě)的就是jQuery的函數(shù)，代碼很簡(jiǎn)單：

?1$(document).ready(function()?{
?2????//?Expand?Panel
?3????$("#open").click(function(){
?4????????$("div#panel").slideDown("slow");//點(diǎn)擊id為open的鏈接展開(kāi)面板????
?5????});????
?6????
?7????//?Collapse?Panel
?8????$("#close").click(function(){
?9????????$("div#panel").slideUp("slow");????//點(diǎn)擊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();//這個(gè)就是具有slideUp()和slideDown()雙重效果
15????});????
16????????
17});

?

這里有完整的程序：

/Files/psunny/jquery實(shí)現(xiàn)的動(dòng)畫(huà)隱藏登陸框下載.rar

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

總結(jié)

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

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