jQuery 動畫 - fadeIn 與 fadeOut

jQuery/jQuery Mobile 技術文件 》

jQuery 同時支援簡單與複雜的動畫實作,這裏先來看看淡出/淡入等簡單的效果。我們可以動態透過 CSS 的 Opacity 屬性來完成物件的淡出/淡入效果,而 jQuery 的 fadeIn() 與 fadeout() 支援相同的效果,假設你在網頁上配置一張圖片,並且將其名命為 myimg ,考慮以下的程式碼:

$('#myimg').fadeIn();
$('#myimg').fadeOut();

第一行會逐步將 myimg 的 Opacity 屬性值從 0 調整至 1 ,讓圖片呈現淡入的效果,第二行則是反向呈現淡出效果,以下建立一個網頁作示範,配置如下:

<body >
   <div id="cimg"  style="background:black;" >
<img id="girl" src="images/girl.jpg" />
</div>
</body>

於<div>標籤區塊中,配置一個示範用的圖片,背景設定為黑色以方便測試,得到以下的畫面:


接下來建立所需的 jQuery 程式碼:

<script>
    var f = true;
    $(document).ready(function () {
        $('#cimg').click(fadeinout);
    });
    function fadeinout() {
        if (f)
            $('#girl').fadeOut();
        else
            $('#girl').fadeIn();
        f = !f;
    }   
</script>

網頁載入之後,首先於<div>區塊註冊 click 事件,執行 fadeinout() ,其中檢視 f 變數,如果是 true ,則調用 fadeout() 執行淡出效果,否則執行淡入效果。結果畫面如下,在上面按一下,圖片會淡出,再按下則淡入。


使用 jQuery 實現動畫效果的好處,在於它本身會自動處理不同瀏覽器的相容性問題,讓設計開發人員可將重心放在內容的製作上面,例如以上的效果可以在 IE7(含)以上的瀏覽器正確的運行。

沒有留言: