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

比如

  $("#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只是个名字,可以随意取,不影响代码运行。

jquery动画控制非css属性的更多相关文章

  1. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  2. jquery的animate()方法也可设置非css属性

    如题,举例: $('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-=" ...

  3. jquery之往一个CSS属性里写入多个值

    <html> <head> <title>test</title> <base href="<%=basePath%>&qu ...

  4. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  5. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  6. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

  7. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  8. jQuery修改css属性

    jQuery CSS 操作jQuery 拥有三种用于 CSS 操作的重要函数:$(selector).css(name,value)$(selector).css({properties})$(sel ...

  9. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

随机推荐

  1. ES6之Proxy 的巧用

    摘要: Proxy的骚操作. 作者:前端小智 原文:Proxy 的巧用 Fundebug经授权转载,版权归原作者所有. Proxy 介绍 使用Proxy,你可以将一只猫伪装成一只老虎.下面大约有6个例 ...

  2. liteos队列(五)

    1. 概述 队列又称消息队列,是一种常用于任务间通信的数据结构,实现了接收来自任务或中断的不固定长度的消息,并根据不同的接口选择传递消息是否存放在自己空间.任务能够从队列里面读取消息,当队列中的消息是 ...

  3. java1.8新特性整理(全)

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/yitian_66/article/deta ...

  4. 重新学习SpringMVC——补充

    56. SpringMVC_源码解析57. SpringMVC_Spring整合SpringMVC_提出问题58. SpringMVC_Spring整合SpringMVC_解决方案59. Spring ...

  5. Location配置与ReWrite语法(五)

    原文链接:https://www.cnblogs.com/crazylqy/p/6892010.html location表示uri方式定位,基础语法有三种: location = pattern { ...

  6. mysql select limit 大数据量查询 性能终极提升方法

    还是广告位 我们的使用mysql的时候总是想当然的使用 select × from tables where a>0 order by id desc limit 500000,200 当我们真 ...

  7. 缓存原理,自己写一个缓存类(c#版)

    .net中的MemoryCache是通过内部封装一个静态Dictionary 自己写一个缓存,来看看内部怎么实现的 public class CustomerCache : ICache { priv ...

  8. bikemanager

    项目特色 前言的技术栈  健全的架构  丰富的UI组件  共享单车项目 掌握react全家桶 掌握地图和react集成技能 掌握前端图标开发技巧 掌握antd UI框架 前端后台架构设计,公共机制封装 ...

  9. bash shell——sum

    #!/bin/bash # sum.sh # 获取随机数量的参数,相加并打印结果 # total= # # $# 表示参数的数量 # for 循环获取每个参数 # ${!i} 表示返回第i个参数 # ...

  10. appium--多进程启动多设备

    前戏 在前面我们都是使用一个机器进行测试,在做app自动化的时候,我们要测不同的机型,也就是兼容性测试,如果一台一台设备去执行,那就显的太麻烦了.所以经常需要我们启动多个设备,同时跑自动化测试用例,要 ...