jQuery动画效果
Posted jjzz1234
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()的使用。作用：程序暂停当前的步骤（如果当前步骤没有全完执行完，也暂停），继续后面的步骤，直到结束
【实例】实现点击按钮显示盒子，再点击按钮隐藏盒子
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 #outerwidth: 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 elsedi.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 #outerwidth: 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 #d1float: 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 divposition: 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。
以上是关于jQuery动画效果的主要内容，如果未能解决你的问题，请参考以下文章