jQuery基础–动画操作
- 2019 年 10 月 10 日
- 笔记
- 三组基本动画
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="显示"> <input type="button" value="隐藏"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //show不传参数，没有动画效果 //$("div").show(); //show(speed) //speed:动画的持续时间 可以是毫秒值 还可以是固定字符串 //fast:200ms normal:400ms slow:600 //$("div").show("ddd"); // show([speed], [callback]) $("div").show(1000, function () { console.log("哈哈，动画执行完成啦"); }) }); $("input").eq(1).click(function () { $("div").hide(); }) }); </script> </body> </html>
滑入滑出
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="显示"> <input type="button" value="隐藏"> <input type="button" value="切换"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //滑入（slideDown） 滑出：slideU $("input").eq(0).click(function () { //slideDown：如果不传参数，有一个默认值normal //$("div").slideDown(); //$("div").slideDown(1000); $("div").slideDown(1000, function () { console.log("额呵呵"); }); }); $("input").eq(1).click(function () { $('div').slideUp(); }) $("input").eq(2).click(function () { //如果是滑入状态，就执行滑出的动画， $('div').slideToggle(); }) }); </script> </body> </html>
淡入淡出
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="显示"> <input type="button" value="隐藏"> <input type="button" value="切换"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //淡入：fadeIn 淡出：fadeOut 切换：fadeToggle $("input").eq(0).click(function () { $("div").fadeIn(2000); }); $("input").eq(1).click(function () { $("div").fadeOut(1000); }) $("input").eq(2).click(function () { //如果是滑入状态，就执行滑出的动画， $('div').fadeToggle(); }) }); </script> </body> </html>
下拉菜单案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <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-image: url(imgs/bg.jpg); } .wrap li { background-image: url(imgs/libg.jpg); } .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> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //mouseover：鼠标经过事件 //mouseout:鼠标离开事件 //mouseenter:鼠标进入事件 //mouseleave：鼠标离开事件 var $li = $(".wrap>ul>li"); //给li注册鼠标经过事件，让自己的ul显示出来 $li.mouseenter(function () { //找到所有的儿子，并且还得是ul //stop：停止当前正在执行的动画 $(this).children("ul").stop().slideDown(); }); $li.mouseleave(function () { $(this).children("ul").stop().slideUp(); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul class="ul"> <li><a href="javascript:void(0);">二级菜单11</a></li> <li><a href="javascript:void(0);">二级菜单12</a></li> <li><a href="javascript:void(0);">二级菜单13</a></li> </ul> </li> <li> <a href="javascript:void(0);">一级菜单2</a> <ul> <li><a href="javascript:void(0);">二级菜单21</a></li> <li><a href="javascript:void(0);">二级菜单22</a></li> <li><a href="javascript:void(0);">二级菜单23</a></li> </ul> </li> <li> <a href="javascript:void(0);">一级菜单3</a> <ul> <li><a href="javascript:void(0);">二级菜单31</a></li> <li><a href="javascript:void(0);">二级菜单32</a></li> <li><a href="javascript:void(0);">二级菜单33</a></li> </ul> </li> </ul> </div> </body> </html>
轮播图案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <style> * { margin: 0; padding: 0; list-style: none; } .slider { height: 340px; width: 790px; margin: 100px auto; position: relative; } .slider li { position: absolute; display: none; } .slider li:first-child { display: block; } .arrow { display: none; } .slider:hover .arrow { display: block; } .arrow-left, .arrow-right { font-family: "SimSun", "宋体"; width: 30px; height: 60px; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 50%; margin-top: -30px; cursor: pointer; text-align: center; line-height: 60px; color: #fff; font-weight: 700; font-size: 30px; } .arrow-left:hover, .arrow-right:hover { background-color: rgba(0, 0, 0, .5); } .arrow-left { left: 0; } .arrow-right { right: 0; } </style> </head> <body> <div class="slider"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> <li><a href="#"><img src="images/6.jpg" alt=""></a></li> <li><a href="#"><img src="images/7.jpg" alt=""></a></li> <li><a href="#"><img src="images/8.jpg" alt=""></a></li> </ul> <!--箭头--> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { var count = 0; $(".arrow-right").click(function () { count++; if(count == $(".slider li").length){ count = 0; } console.log(count); //让count渐渐的显示，其他兄弟渐渐的隐藏 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); }); $(".arrow-left").click(function () { count--; if(count == -1){ count = $(".slider li").length - 1; } console.log(count); //让count渐渐的显示，其他兄弟渐渐的隐藏 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); }) }); </script> </body> </html>
- 自定义动画
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } #box2 { background-color: blue; margin-top: 150px; } #box3 { background-color: yellowgreen; margin-top: 300px; } </style> </head> <body> <input type="button" value="开始"> <input type="button" value="结束"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //第一个参数：对象，里面可以传需要动画的样式 //第二个参数：speed 动画的执行时间 //第三个参数：动画的执行效果 //第四个参数：回调函数 $("#box1").animate({left:800}, 8000); //swing:秋千 摇摆 $("#box2").animate({left:800}, 8000, "swing"); //linear:线性 匀速 $("#box3").animate({left:800}, 8000, "linear", function () { console.log("hahaha"); }); }) }); </script> </body> </html>
手风琴案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 1300px; } #box { width: 1200px; height: 400px; border: 2px solid red; margin: 100px auto; } #box li { width: 240px; height: 400px; /*border: 1px solid #000;*/ float: left; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="../jquery-1.12.4.js"></script> <script> $(function () { var $li = $("#box li"); for (var i = 0; i < $li.length; i++) { $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)"); } //给所有的li注册鼠标经过事件 $li.mouseenter(function () { $(this).stop().animate({width:800}).siblings().stop().animate({width:100}); }).mouseleave(function () { $li.stop().animate({width:240}); }); }); </script> </body> </html>
动画队列
$(function () { $("#btn").click(function () { //把这些动画存储到一个动画队列里面 $("div").animate({left:800}) .animate({top:400}) .animate({width:300,height:300}) .animate({top:0}) .animate({left:0}) .animate({width:100,height:100}) }) });
停止动画操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="开始"> <input type="button" value="结束"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { $("div").slideDown(4000).slideUp(4000); }); $("input").eq(1).click(function () { //stop:停止当前正在执行的动画 //clearQueue:是否清除动画队列 true false //jumpToEnd:是否跳转到当前动画的最终效果 true false //.stop().animate(); $("div").stop(true, true); }) }); </script> </body> </html>
