jQuery的动画效果
显/示隐藏/切换动画：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin:0; } div{ width: 500px; height: 500px; background-color: red; display: none; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> var flag = true; $(function(){ // let flag = true; //内部使用let才好使。 $('.box1').click(function(){ $('div').show(2000); }); $('.box2').click(function(){ $('div').hide(2000); }); $('.box3').click(function(){ if(flag){ $('div').show(2000); flag = false; }else{ $('div').hide(2000); flag = true; } }); }) </script> </head> <body> <button class="box1">显示</button> <button class="box2">隐藏</button> <button class="box3">切换</button> <div></div> </body> </html>
开关式显示隐藏动画：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: pink; display: none; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('#btn').click(function(){ $('div').toggle(2000,function(){ $(this).text('盒子出来了'); console.log($(this)); if($('#btn').text() =='隐藏'){ $('#btn').text('显示'); }else{ $('#btn').text('隐藏'); } }) }) }) </script> </head> <body> <button id="btn">显示</button> <div></div> </body> </html>
滑入和滑出：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: skyblue; display: none; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> var flag = true; $(function(){ // let flag = true; $('.b1').click(function(){ $('div').slideDown(2000,function(){ $(this).text('滑出来了') flag = false; }) }) $('.b2').click(function() { $('div').slideUp(2000,function(){ $(this).text(''); flag = true; }) }); $('.b3').click(function(){ if(flag){ $('div').slideDown(2000,function(){ $(this).text('滑出来了') flag = false; }) }else{ $('div').slideUp(2000,function(){ $(this).text(''); flag = true; }) } }) }) </script> </head> <body> <button class="b1">滑入</button> <button class="b2">滑出</button> <button class="b3">切换滑动</button> <div></div> </body> </html>
淡入淡出动画：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: pink; display: none; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('.b1').click(function(){ if($(this).text() == '淡入'){ $('div').fadeIn(2000); $(this).text('淡出'); }else{ $('div').fadeOut(2000); $(this).text('淡入'); } }); $('.b2').click(function(){ $('div').fadeToggle(2000); }) }) </script> </head> <body> <button class="b1">淡入</button> <button class="b2">切换</button> <div></div> </body> </html>
通过改变透明度，切换匹配元素的显示或隐藏状态：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 300px; display: none; opacity:1; background-color: red; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('button:eq(0)').click(function(){ $('div').fadeIn(2000); }) $('button:eq(1)').click(function(){ $('div').fadeOut(2000); }); $('button:eq(2)').click(function(){ $('div').fadeToggle(1000); }) $('button:eq(3)').click(function(){ $('div').fadeTo(1000,0.1,function(){ alert('更改透明度成功') }) }) }) </script> </head> <body> <button>淡入</button> <button>淡出</button> <button>切换</button> <button>改透明度0.5</button> <div></div> </body> </html>
自定义动画：
$(selector).animate({params}, speed, callback);
作用：执行一组CSS属性的自定义动画。
1，第一个参数表示：要执行动画的CSS属性(必选)。
2，第二个参数表示：执行动画的时长。
3，第三个参数表示：动画执行完毕后，立即执行的回调函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ position: absolute; width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function(){ var json = { 'width':500, 'height':500, 'left':300, 'top':300, 'border-radius':100 }; var json2 = { 'width':100, 'height':100, 'left':100, 'top':100, 'border-radius':50 }; $('div').animate(json,1000,function(){ $('div').animate(json2,1000,function(){ alert("执行完毕！"); }) }) }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html>
停止动画：
$(selector).stop(true, false);
第一个参数：
true：后续动画不执行。
false：后续动画会执行。
第二个参数：
true：立即执行完成当前动画。
false：立即停止当前动画。
参数如果都不写，默认两个都是false。
鼠标悬停时，弹出下拉菜单(下拉时带动画):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin:0; } ul{ list-style: none; } .wrap{ width: 330px; height: 30px; margin:100px auto 0; padding-left: 10px; background-color: pink; } .wrap li{ background-color: green; } .wrap>ul>li{ float: left; margin-right: 10px; position: relative; } .wrap a{ /*display: none;*/ height: 30px; width: 100px; text-decoration: none; color: black; line-height: 30px; text-align:center; } .wrap li ul{ position:absolute; top:30px; display: none; } </style> <script type="text/javascript" src='../../jquery-3.3.1.js'></script> <script type="text/javascript"> $(document).ready(function(){ var jqli = $('.wrap>ul>li'); jqli.mouseenter(function(){ $(this).children('ul').stop().slideDown(1000); }); jqli.mouseleave(function(){ $(this).children('ul').stop().slideUp(1000); }); }); </script> </head> <body> <div class="wrap"> <ul> <li><a href="javascript:;">一级菜单1</a> <ul> <li><a href="javascript:;">一级菜单2</a></li> <li><a href="javascript:;">一级菜单3</a></li> <li><a href="javascript:;">一级菜单4</a></li> </ul> </li> <li><a href="">二级菜单1</a> <ul> <li><a href="javascript:;"></a>二级菜单2</li> <li><a href="javascript:;"></a>二级菜单3</li> <li><a href="javascript:;"></a>二级菜单4</li> </ul> </li> <li><a href="">三级菜单1</a> <ul> <li><a href="javascript:;">三级菜单2</a></li> <li><a href="javascript:;">三级菜单3</a></li> <li><a href="javascript:;">三级菜单4</a></li> </ul> </li> </ul> </div> </body> </html>
PS:
javascript:void(0); //跟javascript:;效果一样
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
