- <!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
- })
