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

比如

  1. $("#box").animate({height:"300px"},3000);
  1. 可以控制idbox的标签在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. 【Linux】扩展阿里云数据盘分区和文件系统

    扩容云盘只是扩大存储容量,不会扩容文件系统 一.准备工作 在扩展数据盘扩展分区和文件系统前,请提前完成以下工作. 创建快照以备份数据,防止操作失误导致数据丢失. 通过ECS控制台或者API扩容云盘容量 ...

  2. rhel7学习第一天

    今天是在线学习刘遄老师<Linux就该这么学>的第一天,对Linux的发展和优越性有了进一步的了解.

  3. 通过premake生成vs工程文件

    visual studio的工程视图,在引用外部目录时非常麻烦,这时候可以使用premake一键生成工程文件,自动配置好工程的各种属性,还有目录的组织结构. 示例:如下是一个c++的外部目录结构,我们 ...

  4. mysql中的case when then 的用法

    将立立饭饭的性别变更为女 ,烦烦 嗯嗯 问我的性别变更为男 update `table` set sex = ( case when sname in('立立','饭饭') then '女' else ...

  5. 201871010106-丁宣元 《面向对象程序设计(java)》第十三周学习总结

    201871010106-丁宣元 <面向对象程序设计(java)>第十三周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nw ...

  6. appium python demo

    #coding=utf-8from appium import webdriverdesired_caps={}desired_caps["platformName"]=" ...

  7. FastDfs的搭建

    一.什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用Fast ...

  8. DRL强化学习:

    IT博客网 热点推荐 推荐博客 编程语言 数据库 前端 IT博客网 > 域名隐私保护 免费 DRL前沿之:Hierarchical Deep Reinforcement Learning 来源: ...

  9. js中VO解析

    执行环境(环境) 执行环境的用处 执行环境定义了变量或函数有权访问的其他数据,每一个执行环境都存在一个关联的变量对象(VO),代码无法访问,内部解析器会使用它,如果环境为函数,则将函数的AO作为VO, ...

  10. 1,[VS入门教程] 使用Visual Studio写c语言 入门与技巧精品文~~~~下载安装篇

    Microsoft Visual Studio是微软(俗称巨硬)公司出品的强大IDE(Integrated Development Environment 集成开发环境),功能强大齐全,界面舒服之类的 ...