jQuery -- 光陰似箭（二）：jQuery效果的使用
阿新 • • 發佈：2018-11-11
jQuery -- 知識點回顧篇（二）：jQuery效果的使用
1. jQuery 效果 -- 隱藏和顯示: 使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript"src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnHide").click(function(){ $("#myDiv1").hide(); //語法格式：$(selector).hide(speed,callback); //可選引數1：speed 引數規定隱藏/顯示的速度，可以取值："slow"、"fast" 或毫秒。//可選引數2：callback 引數是隱藏或顯示完成後所執行的函式名稱。 // callback的使用如下，即第2個引數是一個函式，jQuery效果執行完會執行該函式。 // $("#myDiv1").hide(3000,function(){ // alert("myDiv1隱藏了"); // }); }); $("#btnShow").click(function(){ $("#myDiv1").show(); //語法格式：$(selector).show(speed,callback); //可選引數1：speed 引數規定隱藏/顯示的速度，可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是隱藏或顯示完成後所執行的函式名稱。 }); }); </script> </head> <body> <button type="button" id="btnHide">隱藏</button> <button type="button" id="btnShow">顯示</button> <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div> </body> </html>
2. jQuery 效果 - 淡入淡出
(1) fadeIn() 方法用於淡入已隱藏的元素。
(2) fadeOut() 方法用於淡出可見元素。
(3) fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則新增淡入效果。如果元素已淡入，則新增淡出效果。
(4) fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnfadeIn").click(function(){ $("#myDiv1").fadeIn(); //語法格式：$(selector).fadeIn(speed,callback); //可選引數1：speed 引數規定效果的時長。它可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是該效果完成後所執行的函式名稱。 }); $("#btnfadeOut").click(function(){ $("#myDiv1").fadeOut(); //語法格式：$(selector).fadeOut(speed,callback); //可選引數1：speed 引數規定效果的時長。它可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是該效果完成後所執行的函式名稱。 }); $("#btnfadeToggle").click(function(){ $("#myDiv1").fadeToggle(); //語法格式：$(selector).fadeToggle(speed,callback); //可選引數1：speed 引數規定效果的時長。它可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是該效果完成後所執行的函式名稱。 }); $("#btnfadeTo").click(function(){ $("#myDiv1").fadeTo("slow",0.35); //語法格式：$(selector).fadeTo(speed,opacity,callback); //第一個引數是必須的：傳入的值可以是"slow"、"fast" 、毫秒； //第二個引數是必須的：傳入值是透明度，取值在0-1之間 //第三個引數是可選的：callback 引數是該效果完成後所執行的函式名稱。 }); }); </script> </head> <body> <button type="button" id="btnfadeIn">fadeIn</button> <button type="button" id="btnfadeOut">fadeOut</button> <button type="button" id="btnfadeToggle">fadeToggle</button> <button type="button" id="btnfadeTo">fadeTo</button> <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div> </body> </html>
3. jQuery 效果 - 滑動
(1) slideDown() 方法用於向下滑動元素。
(2) slideUp() 方法用於向上滑動元素。
(3) slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素已向下滑動，則向上滑動它們。如果元素已向上滑動，則向下滑動它們。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnslideDown").click(function(){ $("#myDiv1").slideDown(); //語法格式：$(selector).slideDown(speed,callback); //可選引數1：speed 引數規定效果的時長。它可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是滑動完成後所執行的函式名稱。 }); $("#btnslideUp").click(function(){ $("#myDiv1").slideUp(); //語法格式：$(selector).slideUp(speed,callback);; //可選引數1：speed 引數規定效果的時長。它可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是滑動完成後所執行的函式名稱。 }); $("#btnslideToggle").click(function(){ $("#myDiv1").slideToggle(); //語法格式：$(selector).slideToggle(speed,callback);; //可選引數1：speed 引數規定效果的時長。它可以取值："slow"、"fast" 或毫秒。 //可選引數2：callback 引數是滑動完成後所執行的函式名稱。 }); }); </script> </head> <body> <button type="button" id="btnslideDown">slideDown</button> <button type="button" id="btnslideUp">slideUp</button> <button type="button" id="btnslideToggle">slideToggle</button> <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div> </body> </html>
4. jQuery 效果 - 動畫
animate() 方法用於建立自定義動畫。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btn_animate").click(function(){ $("#myDiv1").animate({left:'250px'}); //語法格式：$(selector).animate({params},speed,callback); //第一個引數是必須的：值是定義形成動畫的 CSS 屬性 //第二個引數是可選的：傳入的值是"slow"、"fast" 、毫秒 //第三個引數是可選的：callback 引數是該效果完成後所執行的函式名稱 //第一個引數的css屬性也可以使用相對值，像下面這樣 //$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'}); }); }); </script> </head> <body> <button type="button" id="btn_animate">animate</button> <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div> </body> </html>
5. jQuery -- 停止動畫
stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btn_animate").click(function(){ $("#myDiv1").animate({left:'250px'},5000); }); $("#btn_stop").click(function(){ $("#myDiv1").stop(); //語法格式：$(selector).stop(stopAll,goToEnd); //可選引數1：規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。 //可選引數2：規定是否立即完成當前動畫。預設是 false。 }); }); </script> </head> <body> <button type="button" id="btn_animate">animate</button> <button type="button" id="btn_stop">Stop</button> <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div> </body> </html>
6. jQuery - 鏈式程式設計
鏈式程式設計：在相同的元素上執行多條 jQuery 命令，一條接著另一條。這樣的話，瀏覽器就不必多次查詢相同的元素。如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("#btnLink").click(function(){ $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <button type="button" id="btnLink">鏈式程式設計</button> <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div> </body> </html>