jQuery动画参数

黄良钵

分类: 程序开发 140 0

  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.     $(this).css('position','absolute')
  3.     $('ol').css('position','relative').animate({
  4.         left:400,
  5.         backgroundColor:'blue',
  6.         color:'white'
  7.     },{
  8.         duration:5*1000,
  9.         // 每个动画元素的每个动画属性将调用的函数。
  10.         // 这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
  11.         // step:function(value,fx){
  12.         //     console.log('cccccccccccccccccccc')
  13.         //     // value每一步动画属性的数字值
  14.         //     // fx jQuery.fx 原型对象的一个引用 
  15.         //     // 包含更多属性 例如elme属性值得是当前执行的元素
  16.         //      console.log(value)
  17.         //      console.log(fx.elem)
  18.         //      console.log(fx.start)
  19.         //      console.log(fx.end)
  20.         //      console.log(fx.prop)
  21.         //      if(fx.prop == 'left'){
  22.         //        /  $(':header').css('top',value + 'px')
  23.         //      }
  24.         // }
  25.     //    每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数
  26.     //     progress:function(animate,progress,ms){
  27.     //         console.log(animate)
  28.     //         console.log(progress)
  29.     //         console.log(ms)
  30.     //         $('progress').val(progress)
  31.     //     }
  32.     // }).animate({
  33.     //     top:400,
  34.     //     backgroundColor:'red'
  35.     // },{
  36.     //     duration:3*1000,
  37.     //     progress:function(animate,progress,ms){
  38.     //         console.log(animate)
  39.     //         console.log(progress)
  40.     //         console.log(ms)
  41.     //         $('progress').val(progress)
  42.     //     }
  43.     })
  44. })
  45. $('button').click(function(){
  46.     console.log('ccc')
  47.     // 禁止动画
  48.     // $.fx.off = true
  49.     // jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率 
  50.     // $.fx.interval = 500
  51. })
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery、jQuery动画参数

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “jQuery动画参数”

Loading...