js进阶 13-4 jquery自定义动画animate()如何使用
一、总结
一句话总结：animate(params,[speed],[easing],[fn])，参数：params:一组包含作为动画属性和终值的样式属性和及其值的。
1、animate中的样式设置的时候的注意事项是什么？
样式名必须以驼峰式方式，不然会出错，和在css中的不一样
集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left
2、jquery库的animate方法的缺陷是什么？
19 //jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性
3、jquery位移动画如何实现？
设置为绝对定位了才能移动left和top
29 $('#btn2').click(function(){
30 $('#div1').animate({
31 left:'300px',
32 top:'300px'
33 })
34 })
4、jquery累积动画如何实现？
直接在animate()里面+=即可
35 $('#btn3').click(function(){
36 $('#div1').animate({
37 left:'+=50px',
38 })
39 })
二、jquery自定义动画animate()如何使用
1、自定义动画
jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现，原理跟CSS3动画原理是一样的。
- animate()方法执行CSS属性集的自定义动画。
语法：animate(params,[speed],[easing],[fn])
参数：params:一组包含作为动画属性和终值的样式属性和及其值的
集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 7 <style type="text/css"> 8 input{width: 100px;height: 30px;} 9 #div1{width: 150px;height: 150px;border:1px solid green;background: orange;position: absolute;} 10 </style> 11 </head> 12 <body> 13 <h3>jQuery动画效果</h3> 14 <input id="btn1" type="button" value="animate"> 15 <input id="btn2" type="button" value="位移"> 16 <input id="btn3" type="button" value="累积动画"> 17 <div id="div1">jQuery动画效果</div> 18 <script> 19 //jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性 20 $('#btn1').click(function(){ 21 $('#div1').animate({ 22 '50px', 23 height:'50px', 24 fontSize:'0.5em', 25 opacity:0.5, 26 backgroundColor:'red' 27 },2000) 28 }) 29 $('#btn2').click(function(){ 30 $('#div1').animate({ 31 left:'300px', 32 top:'300px' 33 }) 34 }) 35 $('#btn3').click(function(){ 36 $('#div1').animate({ 37 left:'+=50px', 38 }) 39 }) 40 </script> 41 </body> 42 </html>