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. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  2. 《高性能 Go 代码工坊》中译

    深入研究 Go 应用性能提升的英语系列文章,这里是中译 https://www.yuque.com/ksco/uiondt

  3. seafile部署安装

    安装epel源 yum install epel-release -y 安装docker yum install -y docker service docker start systemctl en ...

  4. 流程及迭代驱动测试管理软件, itest 发布到开源中国

    itest 源码已发布到码云 ,项目已被开源中国收录!详见  https://www.oschina.net/p/itest-cn 测试人自己开发,汇聚10年沉淀,独创流程驱动测试.度量展现测试人价值 ...

  5. 如果使用jsp文件,需要在配置文件中配置resources项,才能让idea识别这个jsp文件

    没有添加这一项在编译后的.class文件中的结构目录是这样子的 添加上这一个配置项,在class配置文件中的位置是这样子的: 添加的配置文件是这样子的: <resources> <r ...

  6. 201871010115 马北 《面向对象程序设计(java)》 第6-7周学习总结

    项目 内容 <面向对象程序设计(java)> https://home.cnblogs.com/u/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...

  7. 学习:API断点和条件记录断点和内存断点的配合

    前言:感觉可能与之前有点相同,主要是介绍shark恒老师说的一种断点方法,结合了API和条件记录进行下断点 适用条件:当我们利用简单的WINDOWS API函数如MessageBoxW/A 又或者获取 ...

  8. pytest--fixture

    前戏 fixture是在测试函数运行前后,由pytest执行的外壳函数.fixture中的代码可以定制,满足多变的测试需求,包括定义传入测试中的数据集.配置测试前系统的初始状态.为批量测试提供数据源等 ...

  9. A1041 Be Unique (20 分)

    一.技术总结 这题在思考的时候遇见了,不知道怎么处理输入顺序问题,虽然有记录每个的次数,事后再反过来需要出现一次的且在第一次出现, 这时我们其实可以使用另一个数组用来存储输入顺序的字符,然后再用另一个 ...

  10. nginx日志说明

    一.日志说明 nginx日志主要有两种:访问日志和错误日志.访问日志主要记录客户端访问nginx的每一个请求,格式可以自定义:错误日志主要记录客户端访问nginx出错时的日志,格 式不支持自定义.两种 ...