zoukankan      html  css  js  c++  java
  • jquery动画控制非css属性

    JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果,

    比如

    1  $("#box").animate({height:"300px"},3000);
    可以控制id为box的标签在3秒内将高度更改到300px。
    那么如果想要控制非CSS属性呢,比如说针对一些WebGl中的动画控制,如果使用setInterval倒是可以实现效果,但是太过麻烦。
    这个时候就可以使用animate方法,生成递进的值,自己获取值来控制一些非CSS属性,比如:

    //输出在1秒内从0递进到20每步执行的值
    $({ height: 0 }).animate({ height: 20 }, {
    step: function (val) {
    console.log(val);
    },
    duration: 1000, //动画持续时间(毫秒)
    complete: function () {
    console.log('我完成了');
    }
    })

    setp回调函数会在每次数据发生变化时调用。这样就可以通过val的值来控制一些非CSS3的属性实现动画效果。

    注:上述代码中出现的两个height只是个名字,可以随意取,不影响代码运行。

  • 相关阅读:
    Gin+Gorm小项目
    python实现监控信息收集
    Vue引入Stylus
    Go搭建一个Web服务器
    saltstack高效运维
    04-01 Django之模板层
    03-01 Django之视图层
    02-01 Django之路由层
    HTTP协议
    01-01 Web应用
  • 原文地址:https://www.cnblogs.com/-lyl/p/animate.html
Copyright © 2011-2022 走看看