歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery中的動畫與特效

jQuery中的動畫與特效

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

對於動畫來說,顯示和隱藏是最基本的效果之一,簡單介紹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>點擊按鈕,看看效果</p>
        <div><em>本節主要降級和學習jQuery的自動顯隱,漸入漸出、飛入飛出。自定義動畫等。 1.顯示和隱藏hide()和show() 對於動畫來說,顯示和隱藏是最基本的效果之一,本節簡單介紹jQuery的顯示和隱藏。</em>
        </div>

以上是對hide()和show()函數的測試。

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

上個例子對show()和hide()方法做了簡單介紹,其實這兩個方法可以接受參數控制顯隱藏過程。
語法如下

show(duration,[callback]);
hide(duration,[callback]);

其中,duration表示動畫執行時間的長短,可以表示速度的字符串,包括slow(0.6秒),normal(0.4秒),fast(0.2秒).也可以是表示時間的整數(毫秒)。callback是可選的回調函數。在動畫完成之後執行

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隱藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //顯示
                });
            });
        </script>

例子和第一個例子相同,只是對hide()和show()增加了時間參數。其實toogle()也可以加入事件參數。

如果直接調用toogle() 也可以實現顯示和隱藏

 $(function () {
            $("#mybtn").toggle(function () {
                $(".hidden").toggle();//獲取到隱藏的將其顯示
                $(this).attr("src", "image/up.jpg");
            }, function () {
                $(".hidden").toggle();//獲取到顯示的將其隱藏
                $(this).attr("src", "image/down.jpg");
            });
        });

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

對於動畫效果顯隱,jQuery還提供了fadeIn()個fadeOut()這兩個實用的方法,他們的動畫效果類似褪色,語法與show()和hide()完全相同。

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

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(3000); //逐漸fadeOut
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000); //逐漸fadeIn
                });
            });
        </script>
        <img src="http://www.linuxidc.com/pic/logo.jpg">
        <input type="button" value="Hide">
        <input type="button" value="Show">

fadeTo()方法的使用。

fadeTo() 方法將被選元素的不透明度逐漸地改變為指定的值。

例子:

<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相關參數

speed
可選。規定元素從當前透明度到指定透明度的速度。

可能的值:

毫秒 (比如 1500)
"slow"
"normal"
"fast"
opacity 必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。
callback
可選。fadeTo 函數執行完之後,要執行的函數。

如需學習更多有關 callback 的內容,請訪問我們的 jQuery Callback 這一章。

除非設置了 speed 參數,否則不能設置該參數。

4.幻燈片slideUp和slideDown效果

<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">

5.自定義動畫

考慮到框架的通用性及代碼文件的大小,jQuery不能涵蓋所有的動畫效果,但它提供了animate()方法,能夠使開發者自定義動畫。本節主要通過介紹animate()方法的兩種形式及應用。

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

animate(params,[duration],[easing],[callback])
其中params為希望進行變幻的css屬性列表,以及希望變化到的最終值,duration為可選項,與show()/hide()的參數含義完全相同。easing為可選參數,通常供動畫插件使用。 用來控制節奏的變化過程。jQuery中只提供了linear和swing兩個值.callback為可選的回調函數。在動畫完成後觸發。

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

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

<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">動畫!</div>

在params中,jQuery還可以用“+=”或者"-="來表示相對變化。如

<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" //相對左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: "+=80px" //相對右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id="block">動畫!</div>

 

先將div進行絕對定位,然後使用animate()中的-=和+=分別實現相對左移和相對右移。

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

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

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

    <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() {
                    //第一個animate與第二個animate同時執行,然後再執行第三個
                    $("#block1").animate({
                            width: "90%"
                        }, {
                            queue: false,
                            duration: 1500
                        })
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(1)").click(function() {
                    //依次執行三個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() {
                    //恢復默認設置
                    $("div").css({
                        width: "",
                        fontSize: "",
                        borderWidth: ""
                    });
                });
            });
        </script>
        <input type="button" id="go1" value="Block1動畫">
        <input type="button" id="go2" value="Block2動畫">
        <input type="button" id="go3" value="同時動畫">
        <input type="button" id="go4" value="重置">
        <div id="block1">Block1</div>
        <div id="block2">Block2</div>

以上兩個div塊同時運用了三個動畫效果,其中第一個div快的第一個動畫添加了queue:false參數,使得前兩項兩個動畫同時執行。

jQuery 3.0.0 發布下載,優秀的Javascrīpt框架 http://www.linuxidc.com/Linux/2016-06/132184.htm

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved