【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之特效篇(2)
本篇将总结jQuery特效--淡入淡出、滑动、停止动画、Chaining(链接技术)在特效中的应用。
淡入淡出
· fadeIn() 淡入已隐藏的元素
· fadeOut() 淡出可见元素
· fadeToggle() 在淡入与淡出之间切换样式
· fadaTo() 设置渐变过程中的不透明度 (0~1区间)
fadeIn()、fadeOut()使用
· fadeIn() 淡入已隐藏的元素 (显示元素)
· fadeOut() 淡出可见元素 (隐藏元素)
语法结构
· $(selector).fadeIn(speed,callback);
· $(selector).fadeOut(speed,callback);
· speed 可选参数 设置效果的时间 可设定值毫秒、"slow"、"fast"、"normal"
· callback 可选参数 完成招执行的函数名称,可以是函数名也可以是匿名函数
<style> #div1,#div2,#div3{ float: left; width: 200px; height:200px; background-color:red; text-align: center; line-height: 200px; display:none; } #div2{ background-color:yellow; } #div3{ background-color: blue; } </style> <div id="div1">div1-fadeIn()</div> <div id="div2">div2-fadeIn("slow")</div> <div id="div3">div3-fadeIn(3000)</div> </br><button id="btn1" style="display:block;clear: both;">淡入效果(显示)</button></br> <button id="btn2">淡出效果(隐藏)</button> <script> $("#btn1").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); $("#btn2").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); </script>
滑动
· sideDown() 向下滑动元素 (显示元素)
· slideUp() 向上滑动元素 (隐藏元素)
· sideToggle() 在向下和向上的滑动效果中切换
sideDown()、sideUp()、slideToggle()使用
语法结构
· $(selector).slideDown(speed,callback);
· $(selector).slideUp(speed,callback);
· $(selector).slideToggle(speed,callback);
· speed 可选参数 设置效果的时间 可设定值毫秒、"slow"、"fast"、"normal"
· callback 可选参数 完成招执行的函数名称,可以是函数名也可以是
</br> <style> #div4{ width: 200px; height:200px; text-align: center; background-color:blue; color:red; margin-top: 20px; } #div4 p{ margin:0px; padding:0px; } </style> <div id="div4"> <p>这是我们演试滑动效果的示例</p> <p>我们将展示如何通过slideDwon()和slideUp()</p> </div> <button id="btn3">slideUp("slow")</button></br> <button id="btn4">slideDown("fast")</button></br> <button id="btn5">滑动效果切换(5000)</button></br> <script> $("#btn3").click(function(){ $("#div4").slideUp("slow"); }); $("#btn4").click(function(){ $("#div4").slideDown("fast"); }); $("#btn5").click(function(){ $("#div4").slideToggle(5000); }); </script>
停止动画
· stop() 停止动画或效果,在它们执行过程中
语法结构
· $(selector).stop(stopAll,goToEnd);
· stopAll 清除动画队列,默认为false,即仅停止活动的动画,允许任何后加入队列的动画继续执行
· goToEnd 立即完成动画,默认为false
· stop()方法会清除被选元素上的当前动画
</br> <button id="btn6">stop()</button></br> <button id="btn7">stop(false,True)</button></br> <button id="btn8">stop(True,false)</button> <script> $("#btn6").click(function(){ $("#div4").stop(); }); $("#btn7").click(function(){ $("#div4").stop(false,true); }); $("#btn8").click(function(){ $("#div4").stop(true,false); }); </script>
Chaining(链接技术)
· Chaining被称为链接的技术,允许我们在相同的元素上运行多条jQuery命令,一条接着另一条,通常我们将它用在动效的效果上,减少我们多次查找相同的元素来设置动画效果。
语法结构
· $(selector).css("color","blue").slideUp(3000).slideDown(3000)
· 换行写法也可运行
$(selector).css("color","blue") .slideUp(3000) .slideDown(3000)
</br> <button id="btn9">Chaining</button> <script> $("#btn9").click(function(){ $("#div4").css("color","white") .slideUp(3000) .slideDown(3000,function(){$(this).css("color","red")}) }); </script>
Clallbac函数小结
· Clallback函数在当前动画100%完成之后才会执行
· Clallback函数一般用在动画结束后需要执行指令的环境下,js默认是逐行执行代码,动画和后续指令的执行如果同时进行可能会产生错误和冲突,所以建议在有动画和指令都要保证执行效果的情况下使用Clallbac函数
· Callback即可以是函数名,也可以是匿名函数
· 如果选中n个html元素进行操作,Callback函数会执行n次
· 使用Callbak函数时加上括号,函数将立即执行,并且只会调用一次,如果不加括号,元素显示或隐藏后才开始调用函数,所以就会出现执行n次的情况
· Callback即可以是函数名,也可以是匿名函数
特效的基本使用总结到此,下一篇将介绍动画用,介绍如何使用animate()方法来自定义动画,我认为这是jQuery特效精化所在,所以放在最后篇幅中介绍。
实例代码已上传我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/jQuery
书山有路勤为径,学海无涯苦作舟!!!
zhoubo
2020.8.13 at home
- 点赞
- 收藏
- 关注作者
评论(0)