jQuery動畫與特效詳解_jquery

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

對於動畫來說，顯示和隱藏是最基本的效果之一，本節簡單介紹jQuery的顯示和隱藏。

複製程式碼 程式碼如下:

       
       
       

點選按鈕，看看效果

       

本節主要降級與學習jQuery的自動顯隱，漸入漸出、飛入飛出。自訂動畫等。 1.顯示和隱藏hide()和show() 對於動畫來說，顯示和隱藏是最基本的效果之一，本節簡單介紹jQuery的顯示和隱藏。
       

以上是對hide()和show()函數的檢定。

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

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

show(duration,[callback]);
hide(duration,[callback]);
其中，duration表示動畫執行時間的長短，可以表示速度的字串，包括slow,normal,fast.也可以是表示時間的整數(毫秒)。 callback是可選的回呼函數。在動畫完成之後執行。

複製程式碼 程式碼如下:

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

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

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

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

複製程式碼 程式碼如下:

        http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg">
       
       

fadeTo()方法的使用。

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

範例：

複製程式碼 程式碼如下:

           

fadeOut相關參數

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

可能的值：

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

如需學習更多 callback 的內容，請造訪我們的 jQuery Callback 這一章。

除非設定了 speed 參數，否則不能設定該參數。

3.幻燈片slideUp和slideDown效果

複製程式碼 程式碼如下:

            $(函數() {
                $("輸入:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("輸入：eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("輸入：eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("輸入：eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        腳本> 
   
   
   
   

   

前面提到了幾種動畫效果，jQuery也提供了slideUp()和slideDown()來模擬PPT中的類似幻燈片拉簾效果，它與slow()和hide()一樣。

以上程式碼定義了一個div和一個img，用add方法組合在一起。

4.自訂動畫

考慮框架的通用性及程式碼檔案的大小，jQuery 無法涵蓋所有的動畫效果，但它提供了 animate() 方法，能夠使開發者自訂動畫。本節主要透過介紹 animate() 方法的兩種形式及應用。

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

動畫（參數，[持續時間]，[緩動]，[回調]）
其中params為希望進行變幻的css屬性列表，以及希望變化到的最終值，duration為可選項，與show()/hide()的參數非常重要。 easing為可選參數，通常提供動畫插件使用。用於控制節奏的變化過程。 jQuery中只提供了線性和擺動兩個值。 callback為可選的回呼函數。在動畫完成後觸發。

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

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

複製程式碼程式碼如下：

            div {
                背景顏色：#FFFF00;
                高度：40px；
                寬度：80px；
                邊框：1px 實心 #000000;
                上方邊距：5px；
                內邊界：5px；
                為對齊文字；
            }
        樣式>
       
            $(函數() {
                $("按鈕").click(function() {
                    $("#block").animate({
                        不透明度的「0.5」，
                        寬度：「80%」，且
                        高度：「100px」，
                        邊框寬度：「5px」，
                        字型大小：「30px」，
                        marginTop: "40px",
                        左邊距：「20px」
                    }, 2000);
                });
            });
        腳本>
        開始>>按鈕>
       

動畫！

在params中，jQuery也可以用「 =」或"-="來表示相對變化。如

複製程式碼程式碼如下：

            div {
                背景顏色：#FFFF00;
                高度：40px；
                寬度：80px；
                邊框：1px 實心 #000000;
                上方邊距：5px；
                內邊界：5px；
                為對齊文字；
                位置：絕對；
            }
        樣式>
       
            $(函數() {
                $("按鈕：第一").click(function() {
                    $("#block").animate({
                        left: "-=80px" //相對左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: " =80px" //相對右移
                    }, 300);
                });
            });
        腳本>
        開始>>按鈕>
        開始>>按鈕>
       

動畫！

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

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

動畫（參數，選項）
其中，params與第一種形式四種，options為動畫任選參數列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback與第一種形式一樣，queue為布林值，表示當有多個animate() 組成jQuery 時，當前animate() 緊接著這個animate()，是依序執行(true)還是同時觸發false

如下例子，展示了animate()替代方案。

複製程式碼程式碼如下：

   
       

       

Block2

以上兩個div塊運用了三個動畫效果，其中第一個div快的第一個動畫添加了queue:false參數，使得前三個同時兩個動畫同時執行。可以透過重置重複測試，熟悉的animate()形式。

以上就是本文的全部內容了，希望大家能夠喜歡。