1 改变元素的宽和高（带动画效果）
show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
<style> div{ width: 200px; height: 200px; background-color: black; } </style> <body> <button id="btn1">显示</button> <button id="btn2">隐藏</button> <button id="btn3">切换</button> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn2").click(function(){ //fast:快速的 //slow:缓慢的 //毫秒：自定义 $("div").hide(2000); }); $("#btn1").click(function(){ $("div").show('slow'); }); $("#btn3").click(function(){ $("div").toggle(1000); }); </script> </body>
2 改变元素的高（拉伸效果）
slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
<script> $("#btn2").click(function(){ $("div").slideUp(1000); //向上收缩 }); $("#btn1").click(function(){ $("div").slideDown(1000); //向下伸展 }); $("#btn3").click(function(){ $("div").slideToggle(1000); //切换 }); </script>
3 不改变元素的大小（淡入淡出效果）
fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
<script> $("#btn2").click(function(){ $("div").fadeOut(1000); // 隐藏：淡出我的视线 }); $("#btn1").click(function(){ $("div").fadeIn(1000); // 显示：映入眼帘 }); $("#btn3").click(function(){ $("div").fadeToggle(1000); // 切换 }); $("#btn4").click(function(){ $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度 }); </script>
4 链
链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；
例如：点击一次按钮，让div完成4个指定动作
1. 背景变粉
2. 字体变绿
3. 收缩
4. 拉伸
<style> div{ width: 200px; height: 200px; background-color: black; color:white; font-size: 3em; } </style> <body> <button>试试</button> <div>hello</div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ $("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000); }); </script> </body>