jQuery動(dòng)畫(huà)與特效詳解

更新時(shí)間：2015年02月01日 16:27:07 投稿：hebedich

本文主要是講解和學(xué)習(xí)jQuery的自動(dòng)顯隱，漸入漸出、飛入飛出、自定義動(dòng)畫(huà)等。非常詳細(xì)，這里推薦給有需要的小伙伴。

1.顯示和隱藏hide()和show()

對(duì)于動(dòng)畫(huà)來(lái)說(shuō)，顯示和隱藏是最基本的效果之一，本節(jié)簡(jiǎn)單介紹jQuery的顯示和隱藏。

<script type="text/javascript">

            $(function() {

                $("input:first").click(function() {

                    $("p").hide(); //隱藏

                });

                $("input:last").click(function() {

                    $("p").show(); //顯示

                });

            });

        </script>

        <input type="button" value="Hide">

        <input type="button" value="Show">

        <p>點(diǎn)擊按鈕，看看效果</p>

        <div><em>本節(jié)主要降級(jí)和學(xué)習(xí)jQuery的自動(dòng)顯隱，漸入漸出、飛入飛出。自定義動(dòng)畫(huà)等。 1.顯示和隱藏hide()和show() 對(duì)于動(dòng)畫(huà)來(lái)說(shuō)，顯示和隱藏是最基本的效果之一，本節(jié)簡(jiǎn)單介紹jQuery的顯示和隱藏。</em>

        </div>

以上是對(duì)hide()和show()函數(shù)的測(cè)試。

2.使用show()、hide()和toggle()方法

上個(gè)例子對(duì)show()和hide()方法做了簡(jiǎn)單介紹，其實(shí)這兩個(gè)方法可以接受參數(shù)控制顯隱藏過(guò)程。
語(yǔ)法如下

show(duration,[callback]);
hide(duration,[callback]);
其中，duration表示動(dòng)畫(huà)執(zhí)行時(shí)間的長(zhǎng)短，可以表示速度的字符串，包括slow,normal,fast.也可以是表示時(shí)間的整數(shù)(毫秒)。callback是可選的回調(diào)函數(shù)。在動(dòng)畫(huà)完成之后執(zhí)行。

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function() {

                $("input:first").click(function() {

                    $("p").hide(300); //隱藏

                });

                $("input:last").click(function() {

                    $("p").show(500); //顯示

                });

            });

        </script>

例子和第一個(gè)例子相同，只是對(duì)hide()和show()增加了時(shí)間參數(shù)。其實(shí)toogle()也可以加入事件參數(shù)。

2.使用fadeIn()和fadeOut()方式

對(duì)于動(dòng)畫(huà)效果顯隱，jQuery還提供了fadeIn()個(gè)fadeOut這兩個(gè)實(shí)用的方法，他們的動(dòng)畫(huà)效果類(lèi)似褪色，語(yǔ)法與slow()和hide()完全相同。

fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
例子

復(fù)制代碼代碼如下:

</script>

fadeTo()方法的使用。

fadeTo() 方法將被選元素的不透明度逐漸地改變?yōu)橹付ǖ闹怠?/p>

例子：

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    $("img").fadeOut(1000);

                });

                $("input:eq(1)").click(function() {

                    $("img").fadeIn(1000);

                });

                $("input:eq(2)").click(function() {

                    $("img").fadeTo(1000, 0.5);

                });

                $("input:eq(3)").click(function() {

                    $("img").fadeTo(1000, 0);

                });

            });

        </script>

            <p><img src="03.jpg"></p>

<input type="button" value="FadeOut">

<input type="button" value="FadeIn">

<input type="button" value="FadeTo 0.5">

<input type="button" value="FadeTo 0">

fadeOut相關(guān)參數(shù)

speed
可選。規(guī)定元素從當(dāng)前透明度到指定透明度的速度。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"
opacity 必需。規(guī)定要淡入或淡出的透明度。必須是介于 0.00 與 1.00 之間的數(shù)字。
callback
可選。fadeTo 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

如需學(xué)習(xí)更多有關(guān) callback 的內(nèi)容，請(qǐng)?jiān)L問(wèn)我們的 jQuery Callback 這一章。

除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)。

3.幻燈片slideUp和slideDown效果

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    $("div").add("img").slideUp(1000);

                });

                $("input:eq(1)").click(function() {

                    $("div").add("img").slideDown(1000);

                });

                $("input:eq(2)").click(function() {

                    $("div").add("img").hide(1000);

                });

                $("input:eq(3)").click(function() {

                    $("div").add("img").show(1000);

                });

            });

        </script>  

    <input type="button" value="SlideUp">

    <input type="button" value="SlideDown">

    <input type="button" value="Hide">

    <input type="button" value="Show"><br>

    <div></div><img src="04.jpg">

前面提到了幾種動(dòng)畫(huà)效果，jQuery還提供了slideUp()和slideDown()來(lái)模擬PPT中的類(lèi)似幻燈片拉簾效果，它與slow()和hide()完全相同。

以上代碼定義了一個(gè)div和一個(gè)img,用add方法組合在一起。

4.自定義動(dòng)畫(huà)

考慮到框架的通用性及代碼文件的大小，jQuery不能涵蓋所有的動(dòng)畫(huà)效果，但它提供了animate()方法，能夠使開(kāi)發(fā)者自定義動(dòng)畫(huà)。本節(jié)主要通過(guò)介紹animate()方法的兩種形式及應(yīng)用。

animate()方法給開(kāi)發(fā)者很大的空間。它一共有兩種形式。第一種形式比較常用。用法如下

animate(params,[duration],[easing],[callback])
其中params為希望進(jìn)行變幻的css屬性列表，以及希望變化到的最終值，duration為可選項(xiàng)，與show()/hide()的參數(shù)含義完全相同。easing為可選參數(shù)，通常供動(dòng)畫(huà)插件使用。用來(lái)控制節(jié)奏的變化過(guò)程。jQuery中只提供了linear和swing兩個(gè)值.callback為可選的回調(diào)函數(shù)。在動(dòng)畫(huà)完成后觸發(fā)。

需要注意。params中的變量遵循camel命名方式。例如paddingLeft不能寫(xiě)成padding-left.另外，params只能是css中用數(shù)值表示的屬性。例如width.top.opacity等

像backgroundColor這樣的屬性不被animate支持。

復(fù)制代碼代碼如下:

<style>

            div {

                background-color: #FFFF00;

                height: 40px;

                width: 80px;

                border: 1px solid #000000;

                margin-top: 5px;

                padding: 5px;

                text-align: center;

            }

        </style>

        <script type="text/javascript">

            $(function() {

                $("button").click(function() {

                    $("#block").animate({

                        opacity: "0.5",

                        width: "80%",

                        height: "100px",

                        borderWidth: "5px",

                        fontSize: "30px",

                        marginTop: "40px",

                        marginLeft: "20px"

                    }, 2000);

                });

            });

        </script>

        <button id="go">Go>></button>

        <div id="block">動(dòng)畫(huà)！</div>

在params中，jQuery還可以用“+=”或者"-="來(lái)表示相對(duì)變化。如

復(fù)制代碼代碼如下:

<style>

            div {

                background-color: #FFFF00;

                height: 40px;

                width: 80px;

                border: 1px solid #000000;

                margin-top: 5px;

                padding: 5px;

                text-align: center;

                position: absolute;

            }

        </style>

        <script type="text/javascript">

            $(function() {

                $("button:first").click(function() {

                    $("#block").animate({

                        left: "-=80px" //相對(duì)左移

                    }, 300);

                });

                $("button:last").click(function() {

                    $("#block").animate({

                        left: "+=80px" //相對(duì)右移

                    }, 300);

                });

            });

        </script>

        <button >Go>></button>

        <button >Go>></button>

        <div id="block">動(dòng)畫(huà)！</div>

先將div進(jìn)行絕對(duì)定位，然后使用animate()中的-=和+=分別實(shí)現(xiàn)相對(duì)左移和相對(duì)右移。

animate()方法還有另外一種形式，如下所示：

animate(params,options)
其中，params與第一種形式完全相同，options為動(dòng)畫(huà)可選參數(shù)列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback與第一種形式完全一樣，queue為布爾值，表示當(dāng)有多個(gè) animate()組成jQuery時(shí)，當(dāng)前animate()緊接這下一個(gè)animate(),是按順序執(zhí)行(true)還是同時(shí)觸發(fā)false

如下例子，展示了animate()第二種用法。

復(fù)制代碼代碼如下:

    <style>

            div {

                background-color: #FFFF22;

                width: 100px;

                text-align: center;

                border: 2px solid #000000;

                margin: 3px;

                font-size: 13px;

                font-family: Arial, Helvetica, sans-serif;

            }

            input {

                border: 1px solid #000033;

            }

        </style>

        <script type="text/javascript">

            $(function() {

                $("input:eq(0)").click(function() {

                    //第一個(gè)animate與第二個(gè)animate同時(shí)執(zhí)行，然后再執(zhí)行第三個(gè)

                    $("#block1").animate({

                            width: "90%"

                        }, {

                            queue: false,

                            duration: 1500

                        })

                        .animate({

                            fontSize: "24px"

                        }, 1000)

                        .animate({

                            borderRightWidth: "20px"

                        }, 1000);

                });

                $("input:eq(1)").click(function() {

                    //依次執(zhí)行三個(gè)animate

                    $("#block2").animate({

                            width: "90%"

                        }, 1500)

                        .animate({

                            fontSize: "24px"

                        }, 1000)

                        .animate({

                            borderRightWidth: "20px"

                        }, 1000);

                });

                $("input:eq(2)").click(function() {

                    $("input:eq(0)").click();

                    $("input:eq(1)").click();

                });

                $("input:eq(3)").click(function() {

                    //恢復(fù)默認(rèn)設(shè)置

                    $("div").css({

                        width: "",

                        fontSize: "",

                        borderWidth: ""

                    });

                });

            });

        </script>

        <input type="button" id="go1" value="Block1動(dòng)畫(huà)">

        <input type="button" id="go2" value="Block2動(dòng)畫(huà)">

        <input type="button" id="go3" value="同時(shí)動(dòng)畫(huà)">

        <input type="button" id="go4" value="重置">

        <div id="block1">Block1</div>

        <div id="block2">Block2</div>

以上兩個(gè)div塊同時(shí)運(yùn)用了三個(gè)動(dòng)畫(huà)效果，其中第一個(gè)div快的第一個(gè)動(dòng)畫(huà)添加了queue:false參數(shù)，使得前兩項(xiàng)兩個(gè)動(dòng)畫(huà)同時(shí)執(zhí)行?？梢酝ㄟ^(guò)重置反復(fù)測(cè)試，熟悉animate()第二種形式。

以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: