基本动画 show hide toggle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本动画</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style> .box{ height: 200px; width: 200px; margin: 10px; background: #ff6700; display: none; } </style> </head> <body> <button>显示</button> <button>隐藏</button> <button>开关式动画</button> <div class="box"></div> <script type="text/javascript"> $(function () { // 显示 $("button").eq(0).click(function () { // show(动画时间,fn) // normal 400ms slow 600ms fast 200ms 也可以是时间 单位毫秒 // fn 回调函数 动画结束后执行回调函数 $(".box").show('slow',function () { // text() 在当前标签写入文本 $(this).text("加载完成！") }) }); // 隐藏 $("button").eq(1).click(function () { // hide(动画时间,fn) // normal 400ms slow 600ms fast 200ms // fn 回调函数 $(".box").hide('fast',function () { console.log('over!'); }) }); // 开关式动画 自动检测动画的开关动态 从而作出关开动作 $('button').eq(2).click(function () { // 如果在开始新的动画之前不将之前的动画效果清除，会导致动画排队。所以在动画之前需要stop $('.box').stop().toggle(2000); }) }) </script> </body> </html>
卷帘门动画 slideDown slideUp slideToggle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>卷帘门动画</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style> .box{ height: 200px; width: 200px; margin: 10px; background: #ff6700; display: none; } </style> </head> <body> <button id="slideDown">卷帘门下拉</button> <button id="slideUp">卷帘门上拉</button> <button id="slideToggle">开关式卷帘门</button> <div class="box"></div> <script type="text/javascript"> $(function () { // 卷帘门下拉 $("#slideDown").click(function () { $('.box').slideDown() }); // 卷帘门上拉 $("#slideUp").click(function () { $('.box').slideUp() }); // 开关式卷帘门 自动检测动画的开关动态 从而作出关开动作 $('#slideToggle').click(function () { $('.box').stop().slideToggle() }) }) </script> </body> </html>
淡入淡出 fadeIn fadeOut fadeToggle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淡入淡出</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style> .box{ height: 200px; width: 200px; margin: 10px; background: #ff6700; display: none; } </style> </head> <body> <button id="fadeIn">淡入</button> <button id="fadeOut">淡出</button> <button id="fadeToggle">开关式淡入淡出</button> <div class="box"></div> <script type="text/javascript"> $(function () { // 淡入 $("#fadeIn").click(function () { $('.box').fadeIn(1000) }); // 淡出 $("#fadeOut").click(function () { $('.box').fadeOut(1000) }); // 开关式淡入淡出 自动检测动画的开关动态 从而作出关开动作 $('#fadeToggle').click(function () { $('.box').stop().fadeToggle(1000) }) }) </script> </body> </html>
自定义动画 animate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义动画</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <button>动画吧</button> <div></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //jquery入口函数 $(function () { // animate({队列的属性},time,fn) var attr={ "height":200, 'width':200, 'top':200, 'left':500, 'border-radius':200 }; var attr2={ "height":0, 'width':0, 'top':0, 'left':1000 }; $('button').click(function () { $('div').stop().animate(attr,2000,function () { $('div').stop().animate(attr2,1000) }); }); }) </script> </body> </html>
二级菜单实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: #ff6700; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">二级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">三级菜单1</a> <ul> <li><a href="javascript:void(0);">三级菜单2</a></li> <li><a href="javascript:void(0);">三级菜单3</a></li> <li><a href="javascript:void(0);">三级菜单4</a></li> </ul> </li> </ul> </div> <script type="text/javascript"> $(function () { $('.wrap>ul>li').mouseenter(function () { $('.wrap>ul>li').eq($(this).index()).children('ul').stop().slideDown('slow'); }); $('.wrap>ul>li').mouseleave(function () { $('.wrap>ul>li').eq($(this).index()).children('ul').stop().slideUp('slow'); }) }) </script> </body> </html>