jQuery三组基本动画
show不传参数，没有动画效果 $("div").show(); show(speed) speed:动画的持续时间 可以是毫秒值 还可以是固定字符串 fast:200ms normal:400ms slow:600 $("div").show("ddd");
动画展示
<!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([speed], [callback]) $("div").show(1000, function () { console.log("哈哈，动画执行完成啦"); }) }); $("input").eq(1).click(function () { $("div").hide(); }) }); </script> </body> </html>
1、滑入滑出动画
- 滑入（slideDown）
- 滑出：slideU
<!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="来来回回"> <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(2000, function () { console.log("我滑走了 哈哈哈 这句话打印用两秒") }); }) $("input").eq(2).click(function () { $('div').slideUp(1000); $("div").slideDown(2000, function () { console.log("我滑走又回来了 哈哈哈 这句话打印用两秒") }); }) $("input").eq(3).click(function () { //如果是滑入状态，就执行滑出的动画， $('div').slideToggle(); }) }); </script> </body> </html>
2、淡入淡出动画
- 淡入：fadeIn
- 淡出：fadeOut
- 切换：fadeToggle （如果是滑入状态，就执行滑出的动画，反之一样）人家就是这样用的 你别犟 这就是个封装好的方法，不用管别的 我天
<!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>
3、自定义动画
animate（）
- 第一个参数：对象，里面可以传需要动画的样式
- 第二个参数：speed 动画的执行时间
- 第三个参数：动画的执行效果
- 第四个参数：回调函数
<!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>
jQuery动画队列
把这些动画存储到一个动画队列里面，构成一组动画，来完成一套动作
animate（）. animate()
<!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; } </style> </head> <body> <input type="button" value="按钮" id="btn"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(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}) }) }); </script> </body> </html>
jQuery停止动画
三种方法：
- stop:停止当前正在执行的动画
- clearQueue:是否清除动画队列 true false
- jumpToEnd:是否跳转到当前动画的最终效果 true false
.stop().animate();
<!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>
jQuery动画案例
京东轮播图
https://yangyongli.blog.csdn.net/article/details/113174943
仿小米手风琴案例
https://yangyongli.blog.csdn.net/article/details/113175216
