特效
jQuery提供一些特效方法来增强web页面人体验。
支持基本特效、淡入淡出特效、滑动特效、自定义特效
方法 | 说明 |
show () | 显示选中的元素 |
hide() | 隐藏选中的元素 |
toggle() | 再选中元素上切换显示和隐藏的状态 |
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>基本特效</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"> </script> </head> <body> <div id="one">隐藏</div> <div id="two">显示上面的</div> <div id="three">控制第二个</div> <script> $(function () { $("#one").on("click",function(){ $("#one").hide(); }); $("#two").on("click",function(){ $("#one").show(); }); $("#three").on("click",function(){ $("#two").toggle(); }); }); </script> </body></html>
---恢复内容结束---
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>基本特效</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"> </script> </head> <body> <div id="one">隐藏</div> <div id="two">显示上面的</div> <div id="three">控制第二个</div> <script> $(function () { $("#one").on("click",function(){ $("#one").hide(); }); $("#two").on("click",function(){ $("#one").show(); }); $("#three").on("click",function(){ $("#two").toggle(); }); }); </script> </body></html>