1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>jQuery动画参数</title>
6. <style>
7. progress{
8. width:600px;
9. }
10. </style>
11. </head>
12. <body>
13. <progress value="0"></progress>
14. <h1>jQuery动画参数</h1>
15. <button>关闭效果</button>
16. <ol>
17. <li>第1项</li>
18. <li>第2项</li>
19. <li>第3项</li>
20. <li>第4项</li>
21. <li>第5项</li>
22. </ol>
23. <script src="jquery.js"></script>
24. <script src="jqueryColor.js"></script>
25. <script src="index.js"></script>
26. </body>
27. </html>
1. $(':header').click(function() {
2.
3. $(this).css('position','absolute')
4. $('ol').css('position','relative').animate({
5. left:400,
6. backgroundColor:'blue',
7. color:'white'
8. },{
9. duration:5*1000,
10. // 每个动画元素的每个动画属性将调用的函数。
11. // 这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
12. // step:function(value,fx){
13. // console.log('cccccccccccccccccccc')
14. // // value每一步动画属性的数字值
15. // // fx jQuery.fx 原型对象的一个引用
16. // // 包含更多属性 例如elme属性值得是当前执行的元素
17. // console.log(value)
18. // console.log(fx.elem)
19. // console.log(fx.start)
20. // console.log(fx.end)
21. // console.log(fx.prop)
22.
23. // if(fx.prop == 'left'){
24. // / $(':header').css('top',value + 'px')
25. // }
26. // }
27.
28. // 每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数
29. // progress:function(animate,progress,ms){
30. // console.log(animate)
31. // console.log(progress)
32. // console.log(ms)
33. // $('progress').val(progress)
34. // }
35. // }).animate({
36. // top:400,
37. // backgroundColor:'red'
38. // },{
39. // duration:3*1000,
40. // progress:function(animate,progress,ms){
41. // console.log(animate)
42. // console.log(progress)
43. // console.log(ms)
44. // $('progress').val(progress)
45. // }
46. })
47. })
48.
49. $('button').click(function(){
50. console.log('ccc')
51. // 禁止动画
52. // $.fx.off = true
53. // jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率
54. // $.fx.interval = 500
55. })