jQuery学习-jQuery动画
2020-08-14 22:42
1046 查看
显示动画
方式一:直接显示,通过display:block
$("div").show();
方式二:渐渐显示出来,通过控制元素宽高、透明度、display,逐渐显示,传入时间参数
$("#d1").show(2000)//2秒后显示完毕
方式三:传入参数逐渐显示
可以是slow:600ms
normal:400ms
fast:200ms
$("#d1").show("slow") 例子 ```javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #d1{ width: 400px; height: 400px; background: aquamarine; display: none; } </style> </head> <body> <div id="d1"> </div> <button type="button">切换</button> <script type="text/javascript"> $("button").click(function(){ $("#d1").show(2000) }) </script> </body> </html>
方式4:show(时间,回调函数)
$("#d1").show(2000,function(){ alert("执行完毕") })
隐藏动画
$("#d1").hide(); $("#d1").hide(1000); $("#d1").hide("slow"); $("#d1").hide(1000,function(){});
隐藏显示切换例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #d1{ width: 400px; height: 400px; background: aquamarine; display: none; } </style> </head> <body> <div id="d1"> </div> <button type="button">切换</button> <script type="text/javascript"> $("button").click(function(){ if($("#d1").css("display")=="none"){ $("#d1").show(2000) }else{ $("#d1").hide(2000) } }) </script> </body> </html>
【注】有写好的函数 $("#d1").toggle(2000) 就可以实现以上操作
滑入和滑出
$("div").slideDown(speed,回调函数) //滑入 $("div").slideUp(speed,回调函数)//滑出 $("div").slideToggle(时间)//已经滑入了就滑出,已经滑出了就滑入
淡入和淡出
$("div").fadeIn(speed,回调函数) //淡入 $("div").fadeOut(speed,回调函数) //淡出 $("div").fadeToggle(时间)//淡入淡出
自定义动画
$("div").animate({params},speed,回调函数);
例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #d1{ width: 400px; height: 400px; background: aquamarine; display: block; position: absolute; left: 0; top: 0; } #btn1{ position: absolute; top: 500px; left: 0; } #btn2{ position: absolute; top: 500px; left: 100px; } .dh{ animation: leftRight 2s infinite; } @keyframes leftRight{ from{ transform: translateX(0); } to{ transform: translateX(500px); } } </style> </head> <body> <div id="d1"> </div> <button type="button" id="btn1">动画启动</button> <button type="button" id="btn2">动画启动</button> <script type="text/javascript"> $("#btn1").click(function(){ $("#d1").animate({ left:"400px" },5000,function(){ alert("动画结束") }) }) $("#btn2").click(function(){ $("#d1").addClass("dh"); }) </script> </body> </html>
以上两种方式都可以让div动起来,但是用css不会卡帧,所以比较推荐css。
停止动画
$(selector).stop(true,false)
第一个参数:
- true:后续动画不执行
- false:后续动画会执行
【注】后续动画是指在一个动画中回调函数中还包含动画。
第二个参数: - true:立即执行完成当前动画
- false:立即停止当前动画
ps:参数不写默认两个flase,实际运行直接写stop()较多。
综合例子:
微信公众号的点击列表:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin:0; padding: 0; box-sizing: border-box; } .menuList{ position: fixed; left: 0; bottom: 0; width: 100%; height: 100px; background: #efefef; display: flex; } .menuItem{ width: 33.3%; height: 100px; border: 1px solid #ccc; position: relative; } .menuItem .title,.childMenu{ width: 33.3vw; height: 100px; line-height: 100px; text-align: center; font-size: 40px; border: 1px solid #ccc; } .menuItem .menuContent{ display: none; position: absolute; left: 0; top: 0px; height: 0px; overflow: hidden; } </style> </head> <body> <div class="menuList"> <div class="menuItem"> <div class="title" data-index="0"> 娱乐新闻 </div> <div class="menuContent"> <div class="childMenu">新闻1</div> <div class="childMenu">新闻2</div> <div class="childMenu">新闻3</div> </div> </div> <div class="menuItem"> <div class="title" data-index="1"> 国内新闻 </div> <div class="menuContent"> <div class="childMenu">新闻1</div> <div class="childMenu">新闻2</div> <div class="childMenu">新闻3</div> </div> </div> <div class="menuItem"> <div class="title" data-index="2"> 金融新闻 </div> <div class="menuContent"> <div class="childMenu">新闻1</div> <div class="childMenu">新闻2</div> <div class="childMenu">新闻3</div> </div> </div> </div> <script type="text/javascript"> $('.title').click(function(){ var index=$(this).attr('data-index'); console.log(index) $(".menuContent").hide().css({ top: "0px", height: "0px" }).eq(index).show().animate( { height:"300px", top:"-300px" },500) }) </script> </body> </html>
结果:
相关文章推荐
- React学习笔记:使用jquery实现动画效果淡入淡出
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- jquery动画学习笔记
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- 【jQuery基础学习】03 jQuery中的事件与动画
- jQuery学习笔记之制作动画与特效
- jQuery动画相关知识学习
- 【学习笔记】锋利的jQuery(三)事件和动画
- 动画执行JQuery学习(7)动画
- jQuery在学习之四、jQuery事件与动画
- jquery 动画学习基础1
- jQuery学习--Chapter03小结(jQuery事件与动画)
- jQuery学习笔记之jQuery的动画
- jQuery学习(七)效果——动画
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- jquery学习第二天:超链接title提示效果、图片放大提示效果、内容展开收缩动画效果
- jQuery学习笔记10:动画效果
- jQuery中的事件和动画学习笔记
- Jquery学习之旅之 动画 animate
- jQuery学习笔记之十一------动画效果