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

時間 2020-06-23

標籤 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>