jQuery系列第五章 jQuery框架動畫特效

時間 2019-11-05

標籤 jquery 系列第五框架動畫特效欄目 JQuery 简体版

原文原文鏈接

第五章 jQuery框架動畫特效

5.1 jQuery動畫特效說明

jQuery框架中爲咱們封裝了衆多的動畫和特效方法，只須要調用對應的動畫方法傳遞合適的參數，就可以方便的實現一些炫酷的效果，並且jQuery框架還支持自定義各類動畫效果。css

jQuery中的動畫效果主要有如下方法html

① 顯示和隱藏動畫
② 展開和收起動畫
③ 淡入和淡出動畫
④ 自定義動畫效果jquery

5.2 顯示和隱藏動畫

jQuery框架中爲咱們提供了專門的方法來控制讓標籤顯示或者是隱藏。標籤的顯示和隱藏在開發中相對來講是比較常見的操做，若是使用原生的JavaScript代碼來控制標籤的顯示或者是隱藏，那麼咱們主要經過控制該標籤的display屬性值來實現。框架

jQuery中控制標籤顯示和隱藏的動畫方法ide

① show() 控制讓標籤顯示的動畫方法
② hide() 控制讓標籤隱藏的動畫方法
③ toggle()控制讓標籤顯示|隱藏效果切換的動畫方法函數

ex：以原生的方法來控制標籤的顯示或隱藏動畫

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--....-->
 5     <style>
 6         #demoID{
 7             width: 200px;
 8             height: 50px;
 9             background: red;
10         }
11     </style>
12     <script src="jquery-3.1.1.js"></script>
13 </head>
14 <body>
15 <div id="demoID"></div>
16 <script>
17     //控制標籤顯示或隱藏的方式(1)
18     //document.getElementById("demoID").style.display = "none";
19     //document.getElementById("demoID").style.display = "block";
20     //控制標籤顯示或隱藏的方式(2)
21     //$("#demoID").css("display","none");
22     $("#demoID").css("display","block");
23 </script>
24 </body>
25 </html>

顯示和隱藏動畫方法語法spa

$("selector").show(speed,callBack)
$("selector").hide(speed,callBack)插件

參數說明：code

第一個參數：可選的參數。speed表示執行動畫的速度，該速度可使用系統默認提供的值，也能夠本身以數字的形式傳入。

系統默認提供的值有：「slow」、「normal」、「fast」，對應的速度分別爲0.6秒、0.4秒和0.2秒。

本身以數字的形式傳遞則：傳遞如1000|3000相似的值，單位爲毫秒，若是傳遞1000表示動畫的執行速度爲1秒。

第二個參數：可選的參數。callBack爲動畫完成時執行的回調函數，該函數每一個元素執行一次。

切換動畫方法語法

調用方式[1] => $("selector").toggle()
調用方式[2] => $("selector").toggle(speed,callBack)

方法參數說明：

（1）調用方式[1]，不傳遞參數。切換當前元素（標籤）的可見狀態，若是當前元素的狀態爲不可見，則切換爲可見，若是當前元素的狀態爲可見，則切換爲不可見。

（2）調用方式[2]，第一個可選的參數爲動畫執行的速度，第二個可選的參數爲動畫執行完後執行的回調函數。

總結

show方法和hide方法用來控制標籤的顯示或者是隱藏，內部的實現邏輯是同時改變標籤的寬度、高度和透明度。

5.3 展開和收起動畫

jQuery框架中，爲咱們提供實現滑動效果的方法，slideDown和slideUp方法分別能夠用來控制標籤展開和收起。

展開和收起動畫方法語法

slideDown(speed，callBack);
slideUp(speed，callBack)
slideToggle(speed,callBack)

方法解釋

slideDown方法的功能是設置讓指定標籤的高度從頂部向底部增長，以呈現出一種展開的動畫效果，元素的其餘屬性不會發生任何變化。

sldeUp方法的功能是設置讓指定標籤的高度從底部向頂部減少，僅僅改變標籤的高度，其餘的屬性並不會改變。

slideToggle方法用來切換所選擇元素的高度，若是當前標籤的高度不爲0，那麼調用該方法後就會把標籤的高度過渡爲0，實現收起的效果，不然就實現展開的效果。

注意：不管是展開仍是收起的動畫方法，他們的動畫效果都僅僅只會改變（增長或減少）標籤的高度。

參數說明

第一個參數：動畫執行的時間，同show方法。
第二個參數：動畫執行完畢的回調函數，能夠省略，同show方法。

代碼示例

 1 <body>
 2 <div>我是div</div>
 3 <button>展開</button>
 4 <button>收起</button>
 5 <button>切換</button>
 6 <script>
 7     $(function () {
 8         $("button").eq(0).click(function () {
 9             $("div").slideDown(2000,function () {
10                 console.log("展開");
11             });
12         })
13         $("button").eq(1).click(function () {
14             $("div").slideUp(2000);
15         })
16         $("button").eq(2).click(function () {
17             $("div").slideToggle(1000,function () {
18                 alert("切換動畫指定完畢")
19             });
20         })
21     })
22 </script>
23 </body>

5.4 淡入和淡出動畫

jQuery框架中還提供了淡入和淡出的動畫方法，這兩個方法分別是fadeIn和fadeOut。

淡入和淡出動畫方法語法

fadeIn(speed，callBack);
fadeOut(speed，callBack)
fadeToggle(speed,callBack)
fadeTo(speed,opactity，callBack)

方法說明：

淡入淡出方法的內部實現原理是控制標籤的透明度，經過改變選中標籤的透明度來實現淡入和淡出的動畫效果，並不修改其餘的屬性。

fadeIn()方法的做用是淡入動畫，即改變標籤的透明度讓標籤慢慢的顯示出來。

fadeOut()方法的做用是淡出動畫，即改變標籤的透明度讓標籤慢慢的消失（透明度爲0）。

fadeToggle()方法的做用是切換動畫，若是當前標籤的透明度不爲0，那麼就執行淡出動畫，不然就執行淡入動畫。

fadeTo()方法的做用是淡入到，即便用動畫效果實現將標籤的透明度設置爲指定的值。

備註：標籤透明度的取值範圍爲0.0~1.0。

參數說明：

speed參數：動畫執行的速度，單位爲毫秒。
callBack參數：動畫執行完畢的回調函數，可選。
opacity參數：指定的標籤透明度（0.0~1.0）。

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="JS/jquery-3.2.1.js"></script>
 7     <style>
 8         div{
 9             width: 400px;
10             height: 200px;
11             background: red;
12         }
13     </style>
14 </head>
15 <body>
16 <div>我是div</div>
17 <button>淡入</button>
18 <button>淡出</button>
19 <button>切換</button>
20 <button>惦記我</button>
21 <script>
22     //fadeIn:淡入
23     //fadeOut:淡出
24     //fadeToggle切換
25     //fadeTo:淡入淡出到...0.5
26     $(function () {
27         //01 獲取頁面中指定的按鈕,添加點擊事件
28         $("button:eq(0)").click(function () {
29             //02 點擊按鈕後,獲取頁面中的div標籤,設置動畫
30             //第一個參數:速度
31             //第二個參數:回調
32             $("div").fadeIn(2000,function () {
33                 alert("顯示完成");
34             });
35         })
36         $("button:eq(1)").click(function () {
37             $("div").fadeOut(1000,function () {
38                 alert("淡出")
39             });
40         })
41         $("button:eq(2)").click(function () {
42             $("div").fadeToggle();
43         })
44         $("button:eq(3)").click(function () {
45             //第一個參數:速度
46             //第二個參數:目標值
47             //第三個參數:回調
48             $("div").fadeTo(1000,0.5,function () {
49                 alert("執行動畫完畢")
50             });
51         })
52     })
53 </script>
54 </body>
55 </html>

5.5 自定義動畫

jQuery框架中自己已經爲咱們封裝好了一些簡單的控制標籤寬高、透明度相關的方法，如顯示和隱藏、展開和收起、淡入和淡出，除了這些方法以外，jQuery還爲咱們提供了animate（）方法，容許咱們自定義動畫效果，經過一些設置咱們能夠實現更加複雜的動畫效果，

自定義動畫的語法

animate(params,speed,easing,callBack)

參數說明：
第一個參數：params是一個對象。在該對象中以鍵值對的方式來要控制的屬性樣式和對應的值表示。

第二個參數：speed速度，能夠是默認字符串中的某個（「slow」「normal」「fast」）或者是自定義的數字。

第三個參數：easing爲動畫插件使用的可選參數，用來控制動畫的表現效果，一般有linear和swing等固定值。

第四個參數：動畫執行完畢後的回調函數。

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 50px;
10             background: red;
11         }
12     </style>
13 </head>
14 <body>
15 <!--
16     animate({},timer,fn)
17     第一個參數:目標對象
18     第二個參數:速度
19     第三個參數:回調函數
20 -->
21 <div>我是個好人</div>
22 <button>
23     喜歡我就點我吧
24 </button>
25 <button>
26     喜歡我就點我吧2
27 </button>
28 <script src="js/jquery-3.2.1.js"></script>
29 <script>
30     $(function () {
31         $("button:eq(0)").click(function () {
32             $("div").animate({
33                 width:"+=50",
34                 height:"+=100"
35              },1000);
36         })
37         $("button:eq(1)").click(function () {
38             //01 直接設置目標值:速度和回調函數能夠被省略
39             //            $("div").animate({
40 //                width:400,
41 //                height:100
42 //            },2000,function () {
43 //                alert("執行完畢");
44 //            })
45             //02 第二種用法
46             //            $("div").animate({
47             //                width:"+=50",
48             //                height:"+=100"
49             //            },1000);
50             //03 動畫切換(若是有值那麼就設置爲0,不然就恢復)
51             $("div").animate({
52                 width:"toggle",
53                 height:"+=100"
54             },1000);
55         })
56     })
57 </script>
58 </body>
59 </html>

動畫隊列、動畫中止和動畫延遲

動畫隊列:若是某個標籤身上要調用多個動畫相關方法，即須要展現多個動畫效果，那麼全部的這些動畫效果並不會同一時刻發生，而是須要在隊列中排隊，而後按照隊列中動畫效果的順序依次展示。

動畫中止：在執行動畫的時候，能夠經過stop（）方法來中止動畫。中止動畫的語法爲：

stop（clearQueue,gotoEnd）

方法和參數說明：

stop方法的功能是中止指定標籤中正在執行的動畫，其中第一個參數clearQueue爲可選參數，傳遞一個布爾類型的值，表示是否中止正在執行的動畫。第二個參數gotoEnd也是可選參數，傳遞一個布爾類型的值，表示是否當即完成正在執行的動畫。

動畫延遲：設置一個延時的值來推遲後續隊列中動畫的執行，能夠傳遞延遲的具體時間，單位爲毫秒。

代碼示例01

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background: yellow;
11         }
12     </style>
13 </head>
14 <body>
15 <div>
16 </div>
17 <button>按鈕</button>
18 <script src="js/jquery-3.2.1.js"></script>
19 <script>
20     $(function () {
21         $("button").click(function () {
22             $("div").animate({
23                 width:"50px"
24             })
25                     .animate({
26                         height:50
27                     })
28                     .delay(2000)
29                     .animate({
30                         height:300
31                     })
32                     .animate({
33                         width:400
34                     })
35         })
36     })
37 </script>
38 </body>
39 </html>

代碼示例02

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 50px;
 9             height: 50px;
10             background: green;
11         }
12     </style>
13 </head>
14 <body>
15 <div>
16 </div>
17 <button>按鈕</button>
18 <script src="js/jquery-3.2.1.js"></script>
19 <script>
20     $(function () {
21         //01 當頁面加載完畢就執行動畫效果
22         $("div").animate({
23                     width:"400px"
24                 },2000)
25                 .animate({
26                     height:200
27                 },1000)
28                 .delay(1000)
29                 .animate({
30                     height:50
31                 })
32                 .animate({
33                     width:50
34                 })
35         //02 當點擊按鈕的時候中止動畫
36         $("button").click(function () {
37             //01 沒有傳遞參數:結束當前的動畫,繼續執行後面的動畫
38             //$("div").stop();
39             //02 傳遞1參數:
40             // true:全部的動畫所有結束
41             // false:結束當前的動畫,繼續執行後面的動畫
42             //$("div").stop(true);
43             //$("div").stop(false);
44             //03 傳遞2參數:
45             //true true : 馬上結束到達當前動畫的終點,後面的再也不執行
46             //true false:全部的動畫所有結束
47             //false false:結束當前的動畫,繼續執行後面的動畫
48             //false true : 馬上結束到達當前動畫的終點,後面的繼續執行
49             //$("div").stop(true,true);
50             //$("div").stop(true,false);
51             //$("div").stop(false,false);
52             $("div").stop(false,true);
53         })
54     })
55 </script>
56 </body>
57 </html>