jQuery 的综合动画
+ 可以按照你的设定去进行运动
1. animate()
=> 语法: animate({}, 时间, 运动曲线, 回调函数)
=> {}: 书写你要运动的属性 （普通Css属性）
=> 注意:
-> 颜色相关的属性, 运动不了
-> CSS3 的 2d 和 3d 动画效果运动不了
例： 注意 书写 {} 运动的属性时 带单位的话记得加上 单引号 ' '
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jqsourse.js"></script> <style> *{ margin:0; padding: 0; } div{ width: 100px; height: 100px; background-color: red; position: relative; } </style> </head> <body> <button class="animate">点击运动</button> <div></div> <script> $(".animate").click(()=>{ $("div").animate({ 300, height:'300px', left:'100px', top:'100px', borderRadius:'50%', color:'#2600ff' //没用的啊！ 颜色 和 Css 2D 、 3D 在这里都不起作用 },2000,'linear',()=>{ console.log("已执行动画！"); }) }); </script> </body> </html>
因为JQ是链式编程 所以会可以叠加动画 ， 记住要配合 display 来操作。
jQuery 的停止动画
+ 因为当你给一个元素设置动画以后
+ 如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
+ jquery 给我们提供两个临时停下动画的方法
1. stop()
+ 语法: 元素集合.stop()
+ 当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来 即立即停止那种：
+ 运动到什么位置就停止在什么位置
2. finish()
+ 语法: 元素集合.finish()
+ 当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置
+ 直接完成本次动画
例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jqsourse.js"></script> <style> *{ margin:0; padding: 0; } div{ width: 100px; height: 100px; background-color: red; position: relative; } </style> </head> <body> <button class="animate">点击运动</button> <button class="stop">点击暂停</button> <button class="finish">直接结束</button> <div></div> <script> $(".animate").click(()=>{ $("div").animate({ 300, height:'300px', left:'100px', top:'100px', borderRadius:'50%', color:'#2600ff' //没用的啊！ 颜色 和 Css 2D 、 3D 在这里都不起作用 },2000,'linear',()=>{ console.log("已执行动画！"); }) }); /***-------------------------------------------*/ $(".stop").click(()=>{ $("div").stop(); }); /***-------------------------------------------*/ $(".finish").click(()=>{ $("div").finish() }); </script> </body> </html>
注意： 你点击暂停 再继续点击 开始 他会继续做动画 ，而不是重新来一遍.