jQuery动画参数

原创 黄良钵  2017-08-17 21:53  阅读 16 次 评论 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. })
本文地址:https://xn--nf1a578axkh.xn--fiqs8s/1016.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情