寫給大忙人看的jQuery動畫效果

---

鼠年第一篇，祝CSDN各位大佬以及所有程序員新年快樂，鼠年大吉，永不BUG！

一、基本動畫效果

是指元素的隱藏和顯示

1、隱藏匹配元素

使用hide()方法可以隱藏匹配元素，相當於把CSS樣式屬性display的值設置爲none，它的語法格式如下：

hide(speed,[callback])

其中，speed是指定動畫的時長，可以是數字（單位：毫秒ms），也可以是默認參數（slow(600ms)、normal(400ms)、fast(200ms)）！使用默認參數時候需要加引號“”，而使用數字則不需要加引號！；另一個參數也是可選參數，用於指定隱藏完成之後要觸發的回調函數，如果被選擇到的元素有n個則回調函數執行n次

比如，要用正常的速度隱藏頁面上的id爲demo的元素：

$("#demo").hide("normal");

2、顯示匹配元素

使用show()方法顯示匹配的元素，它的語法和上述方法一模一樣：

show(speed,[callback]);

兩個參數也和上面的一模一樣，例如，要用慢慢的速度展示頁面上id爲demo的元素

$("#demo").show("slow");

3、自動切換顯示或隱藏狀態

使用toggle()方法來實現自動切換，如果元素隱藏，則顯示該元素；否則隱藏。他的語法格式如下：

toggle(speed,[callback]);

參數和上面的意思是一樣一樣的

例子：實現自動隱藏菜單

效果預覽：

步驟1：編寫HTML代碼，引入一張圖片，然後用<div>標籤容納一個列表，HTML代碼不再給出。

步驟2：爲列表設置樣式：

        ul{
            font-size: 12px;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        li{
            padding: 7px;
        }
        a{
            color: #000;
            text-decoration: none;
        }
        #menu{
            float:left;
            text-align: center;
            width: 70px;
            height: 295px;
            padding-top: 5px;
            display: none;
            background-image:url("images/menu_bg.gif") ;
        }

步驟3：引入jQuery庫，編寫JavaScript代碼：

$(document).ready(function () {
    $("img").click(function () {
        $("#menu").toggle("slow");
    });
});

完成

---

二、淡入、淡出動畫效果

淡入淡出效果如下圖所示：

共有如下四種方法:

• fadeIn(speed,[callback])：增大不透明度實現元素淡入
• fadeOut(speed,[callback])：減小不透明度實現元素淡出
• fadeTo(speed,opacity,[callback])：不透明度以漸進的方式調整到指定參數，opacity參數只能是0到1之間的數字，數值越大透明度越低
• fadeToggle(speed,[callback])：如果元素已淡出則淡入，否則淡出

例子：使用fadeTo實現圖片顏色變淡

效果如下：

步驟1：編寫HTML代碼，併爲每個<div>賦一個id

步驟2：引入jQuery庫，然後編寫jQuery代碼：

$(document).ready(function () {
    $("input[type='button']").click(function () {
        $("#div1").fadeTo("slow",0.25);
        $("#div2").fadeTo("slow",0.5);
        $("#div3").fadeTo("slow",0.75);
    });
});

完成

---

三、滑動效果

先來看一下總體的效果吧：

1、滑動顯示匹配的元素

向下滑動顯示元素，格式如下：

slideDown(speed,[callback]);

2、滑動隱藏匹配的元素

向上滑動隱藏元素，格式如下：

slideUp(speed,[callback]);

3、自動滑動顯示或隱藏元素

slideToggle(speed,[callback]);

其中，所有參數均與最上面的參數含義相同

例子：實現伸縮式導航菜單

先來看一下效果唄：

步驟1：編寫HTML代碼，做一個大致的樣子，爲每項添加元素

<dl>
    <dt>員工管理</dt>
    <dd>
        <div class="item">添加員工信息</div>
        <div class="item">管理員工信息</div>
    </dd>
    <dt>招聘管理</dt>
    <dd>
        <div class="item">瀏覽應聘信息</div>
        <div class="item">添加應聘信息</div>
        <div class="item">瀏覽人才庫</div>
    </dd>
    <dt>薪酬管理</dt>
    <dd>
        <div class="item">薪酬登記</div>
        <div class="item">薪酬調整</div>
        <div class="item">薪酬查詢</div>
    </dd>
    <dt class="tittle"><a href="#">退出系統</a></dt>
</dl>

步驟2：編寫CSS樣式，控制菜單的樣式：

        dl{
            width: 158px;
            margin: 0px;
        }
        dt{
            font-size: 14px;
            padding: 0px;
            margin: 0px;
            width: 146px;
            height: 19px;
            background-image: url("images_2/title_show.gif");
            padding: 6px 0px 0px 12px;
            color: #215dc6;
            font-size: 12px;
            cursor: hand;
        }
        dd{
            color:#000;
            font-size: 12px;
            margin: 0px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: #ff6600;
        }
        #bottom{
            width: 158px;
            height: 31px;
            background-image: url("images_2/bottom.gif");
        }
        .tittle{
            background-image: url("images_2/title_quit.gif");
        }
        .item{
            width: 146px;
            height: 15px;
            background-image: url("images_2/item_bg.gif");
            padding: 6px 0px 0px 12px;
            color: #215dc6;
            font-size: 12px;
            cursor: hand;
            background-position: center;
            background-repeat: no-repeat;
        }

步驟3：編寫jQuery代碼，首先隱藏所有子元素，然後綁定單擊事件，如果單擊就觸發函數，該函數判斷點擊的下一個元素是否被隱藏或者顯示，實現子菜單的顯示和隱藏，代碼如下：

$(document).ready(function () {
    $("dd").hide();
    $("dt[class!='title']").click(function () {
        if($(this).next().is(":hidden")){
            $(this).css("backgroundImage","url(images_2/title_hide.gif)");
            $(this).next().slideDown("slow");
        }
        else{
            $(this).css("backgroundImage","url(images_2/title_show.gif)");
            $(this).next().slideUp("slow");
        }
    });
});

---

四、自定義動畫效果

1、使用animate()方法創建自定義動畫

animate()方法可以隨意控制元素的屬性，實現更加絢麗的動畫效果，語法格式如下：

animate(params,speed,callback);

其中params表示一個包含屬性和值的映射，可以同時包含多個屬性，例如{left:"200px",top:"100px"}；speed控制速度；callback代表一個回調函數

在使用animate方法時，必須設置元素定位屬性position爲relative或absolute，元素才能動起來

例子：實現幕簾效果

效果如下：

步驟1：編寫HTML代碼：

歡迎光臨wzq的電影院<hr>
<div class="leftcurtain"><img src="images_3/frontcurtain.jpg"></div>
<div class="rightcurtain"><img src="images_3/frontcurtain.jpg"></div>
<a class="rope" href="#">拉開幕簾</a>

步驟2：編寫CSS樣式，設置背景以及控制幕簾和文字的顯示樣式：

        *{
            margin: 0;
            padding: 0;
        }
        body{
            color: #FFFFFF;
            text-align: center;
            background: #4f3722 url("images_3/darkcurtain.jpg");
        }
        img{
            border: none;
        }
        p{
            margin-bottom: 10px;
            color:#FFFFFF;
        }
        .leftcurtain{
            width: 50%;
            height: 495px;
            top:0px;
            left: 0px;
            position: absolute;
            z-index: 2;
        }
        .rightcurtain{
            width: 51%;
            height: 495px;
            right: 0px;
            top:0px;
            position: absolute;
            z-index: 3;
        }
        .rightcurtain img, .leftcurtain img{
            width: 100%;
            height: 100%;
        }
        .rope{
            position: absolute;
            top:70%;
            left: 60%;
            z-index: 100;
            font-size: 36px;
            color: #FFFFFF;
        }

步驟3：引入jQuery庫，然後寫入下面的代碼：

$(document).ready(function () {
    var curtainopen = false;
    $(".rope").click(function () {
        $(this).blur();
        if(curtainopen==false){
            $(this).text("關閉幕簾");
            $(".leftcurtain").animate({width:'60px'},2000);
            $(".rightcurtain").animate({width:'60px'},2000);
            curtainopen=true;
        }else{
            $(this).text("拉開幕簾");
            $(".leftcurtain").animate({width:'50%'},2000);
            $(".rightcurtain").animate({width:'51%'},2000);
            curtainopen=false;
        }
    })
});

2、使用stop()方法停止動畫

語法格式：

stop(clearQueue,gotoEnd);

其中，clearQueue表示是否清空尚未執行的動畫隊列，布爾值；gotoEnd表示是否讓正在執行的動畫直接到達動畫結束時的狀態，布爾值。