• 当前标签:jQuery动画参数

程序开发 jQuery动画参数

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery动画参数</title>     <style>        progress{            width:600px;        }     </style> </head> <body>     <progress value="0"></progress>     <h1>jQuery动画参数</h1>     <button>关闭效果</button>     <ol>         <li>第1项</li>         <li>第2项</li>         <li>第3项</li>         <li>第4项</li>         <li>第5项</li>     </ol>     <script src="jquery.js"></script>     <script src="jqueryColor.js"></script>     <script src="index.js"></script> </body> </html> $(':header').click(function() {     $(this).css('position','absolute')     $('ol').css('position','relative').animate({         left:400,         backgroundColor:'blue',         color:'white'     },{         duration:5*1000,         // 每个动画元素的每个动画属性将调用的函数。         // 这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。         // step:function(value,fx){         //     console.log('cccccccccccccccccccc')         //     // value每一步动画属性的数字值         //     // fx jQuery.fx 原型对象的一个引用          //     // 包含更多属性 例如elme属性值得是当前执行的元素         //      console.log(value)         //      console.log(fx.elem)         //      console.log(fx.start)         //      console.log(fx.end)         //      console.log(fx.prop)         //      if(fx.prop == 'left'){         //        /  $(':header').css('top',value + 'px')         //      }         // }     //    每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数     //     progress:function(animate,progress,ms){     //         console.log(animate)     //         console.log(progress)     //         console.log(ms)     //         $('progress').val(progress)     //     }     // }).animate({     //     top:400,     //     backgroundColor:'red'     // },{     //     duration:3*1000,     //     progress:function(animate,progress,ms){     //         console.log(animate)     //         console.log(progress)     //         console.log(ms)     //         $('progress').val(progress)     //     }     }) }) $('button').click(function(){     console.log('ccc')     // 禁止动画     // $.fx.off = true     // jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率      // $.fx.interval = 500 })

2017-08-17 21:53:39 42 0 0
阅读详情
  • 1
前往