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