show显示动画
方式一：无参数，表示让指定的元素直接显示出来，底层是通过display:block实现的，这就是说，要显示的元素一开始不能是隐藏的
$(选择器).show();
方式二：通过控制元素的宽高、透明度、display属性，逐渐显示，例如：3秒后显示完毕。
$(选择器).show(speed);
方式三：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
$(选择器).show("slow"); 其中slow:600ms normal:400ms fast:200ms
方式四：动画执行完后，立即执行回调函数。
$(选择器).show("slow"，func(){})
四种方式的功能是一样的：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
hide隐藏动画
与show的用法相对应
$(selector).hide();
$(selector).hide(speed);
$(selector).hide("slow");
$(selector).hide(speed, function(){});
注意$('div').stop()的使用。作用：程序暂停当前的步骤（如果当前步骤没有全完执行完，也暂停），继续后面的步骤，直到结束
【实例】实现点击按钮显示盒子，再点击按钮隐藏盒子
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子的显示与隐藏</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 <style> 8 #outer{width: 200px;height: 200px; 9 display: block; overflow: hidden} 10 #inner{ width:150px;height: 150px; 11 display: none; background-color: darkgray} 12 </style> 13 </head> 14 <body> 15 <div id="outer"> 16 <button id="btn">显示盒子</button> 17 <div id="inner"></div> 18 </div> 19 <script> 20 $(function () { 21 var btn = $("button"); 22 var status = false; 23 24 btn.click(function () { 25 var di = $("#inner"); 26 di.stop() 27 if(status){di.hide(700);status=false; 28 btn.prop('textContent','显示盒子')} 29 else{di.show(700);status=true; 30 btn.prop('textContent','关闭盒子')} 31 }); 32 33 }) 34 </script> 35 </body> 36 </html>
toggle开关式显示和隐藏动画
将show与hide结合起来，滨海在二者之间来回切换，但是首先执行的是show。
$(选择器).toggle(speed,function(){});
【升级上边的例子】
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子的显示与隐藏</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 <style> 8 #outer{width: 200px;height: 200px; 9 display: block; overflow: hidden} 10 #inner{ width:150px;height: 150px; 11 display: none; background-color: darkgray} 12 </style> 13 </head> 14 <body> 15 <div id="outer"> 16 <button id="btn">显示盒子</button> 17 <div id="inner"></div> 18 </div> 19 <script> 20 $(function () { 21 var btn = $("button"); 22 var status = false; 23 btn.click(function () { 24 var di = $("#inner"); 25 26 di.stop(); //注意stop的使用 27 di.toggle(700); 28 29 }); 30 }) 31 </script> 32 </body> 33 </html>
滑入与滑出
# 滑入效果 $(选择器).slideDown(speed,回调函数); # 滑出效果 $(选择器).slideUp(speed,回调函数); # 划入滑出效果切换 $(选择器).slideToggle(speed, 回调函数); # 注意 省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒
【实例】点击购物车滑出购物车内详情，再点击，收起购物车详情
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>小米购物车</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 <style> 8 #d1{float: right; 9 width: 210px; 10 height: 120px; 11 text-align: center; 12 line-height: 120px; 13 position: relative; 14 top:0;left:0; 15 overflow: hidden} 16 #d2{ 17 position: absolute; 18 line-height:40px; 19 width: 100px; 20 height:40px; 21 background-color: lightyellow; 22 top:0;right:0 23 } 24 25 #d3{ 26 position: absolute; 27 width: 210px; 28 height: 80px; 29 top:40px; 30 right: 0; 31 background-color: gray; 32 display: none; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="d1"> 38 <div id="d2">购物车<span>0</span></div> 39 <div id="d3"></div> 40 </div> 41 </body> 42 <script> 43 $(function () { 44 let status = false; 45 $('#d2').click(function () { 46 $('#d3').stop(); 47 // 方式一： 48 // if (status) 49 // {$('#d3').slideDown(700); 50 // status = false} 51 // else {$('#d3').slideUp(700); 52 // status = true} 53 // 方式二： 54 $('#d3').slideToggle(500) 55 }); 56 }) 57 </script> 58 </html>
淡入和淡出动画
通过改变透明度，切换匹配元素的显示或隐藏状态。
# 淡入效果 $(selector).fadeIn(speed, callback); # 淡出效果 $(selector).fadeOut(speed, callback); # 淡入和淡出来回切换 $(selector).fadeToggle(speed, callback);
animate自定义动画
$(selector).animate({params}, speed, callback);
【实例】
【要求】
作用：执行一组CSS属性的自定义动画。
第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）
【代码】
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定义动画</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 <style> 8 div{position: absolute;top:50px;left:50px; 9 width: 100px;height: 100px;background-color: gray} 10 </style> 11 </head> 12 <body> 13 <button>自定义动画</button> 14 <div></div> 15 </body> 16 <script> 17 $(function () { 18 $('button').click(function () { 19 var js1 = {"width":300,"height":300,"left":300, 20 "top":300,"border-radius":100}; 21 var js2 = {"width":100,"height":100,"left":50, 22 "top":50,"border-radius":50, 23 "background-color":"gary"}; 24 // 自定义动画 25 $("div").animate(js1,1000,function () { 26 $("div").animate(js2,1000,function () { 27 alert("自定义动画执行完毕") 28 }) 29 }) 30 }) 31 }) 32 </script> 33 </html>
停止动画
$(selector).stop(true, false); 【参数说明】 第一个参数： true：后续动画不执行。 false：后续动画会执行。 第二个参数： true：立即执行完成当前动画。 false：立即停止当前动画。 参数如果都不写，默认两个都是false。