JQuery實現隱藏和顯示動畫效果
本文為大傢分享瞭JQuery實現隱藏和顯示動畫效果的具體代碼,供大傢參考,具體內容如下
隱藏和顯示
語法
- $(selector).fadeIn([speed,callback]);
- $(selector).fadeOut([speed,callback]);
- $(selector).fadeToggle([speed,callback]);
參數說明:
可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
實現代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文檔處理</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <style> div { background: lightblue; padding: 20px; } p { background: lavenderblush; padding: 20px; } </style> <script> $(function() { $("#btnHide").click(function() { //$("div").hide(); //$("div").hide(2000); $("div").hide(2000, function() { alert("隱藏完成!"); }); }); $("#btnShow").click(function() { //$("div").show(); //$("div").show(2000); $("div").show(2000, function() { alert("顯示完成!"); }); }); $("#btnToggle").click(function() { //$("p").toggle(); //$("p").toggle(2000); $("p").toggle(2000, function() { alert("切換完成!"); }); }); }); </script> </head> <body> <button id="btnHide">隱藏-div</button> <button id="btnShow">顯示-div</button> <button id="btnToggle">切換顯示和隱藏-p</button> <div>div1</div> <br/> <div>div2</div> <p style="display: none;">p1</p> <p>p2</p> </body> </html>
效果展示
隱藏效果展示
顯示效果展示
切換顯示和隱藏
從P1切換成瞭P2
淡入和淡出
語法
- $(selector).fadeIn([speed,callback]);
- $(selector).fadeOut([speed,callback]);
- $(selector).fadeToggle([speed,callback]);
參數說明:
可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
實現代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>效果</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <style> div { background: lightblue; padding: 20px; } p { background: lavenderblush; padding: 20px; } </style> <script> $(function() { $("#btnIn").click(function() { //$("div").fadeIn(); //$("div").fadeIn(2000); $("div").fadeIn(2000, function() { alert("淡入完成!"); }); }); $("#btnOut").click(function() { //$("div").fadeOut(); //$("div").fadeOut(2000); $("div").fadeOut(2000, function() { alert("淡出完成!"); }); }); $("#btnToggle").click(function() { //$("p").fadeToggle(); //$("p").fadeToggle(2000); $("p").fadeToggle(2000, function() { alert("切換完成!"); }); }); }); </script> </head> <body> <button id="btnIn">淡入-div</button> <button id="btnOut">淡出-div</button> <button id="btnToggle">切換淡入淡出-P</button> <div>div1</div> <br/> <div>div2</div> <p style="display: none;">p1</p> <p>p2</p> </body> </html>
效果與隱藏和顯示相差不大
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。