jQuery动画效果
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()的使用。作用:程序暂停当前的步骤(如果当前步骤没有全完执行完,也暂停),继续后面的步骤,直到结束
【实例】实现点击按钮显示盒子,再点击按钮隐藏盒子
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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(){});
【升级上边的例子】
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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毫秒
【实例】点击购物车滑出购物车内详情,再点击,收起购物车详情
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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属性(必选)
第二个参数表示:执行动画时长(可选)
第三个参数表示:动画执行完后,立即执行的回调函数(可选)
【代码】
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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。
仅供参考,欢迎指正