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. SpringBoot 整合Mybatis操作数据库

    1.引入依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId> ...

  2. 【Mysql】了解Mysql中的启动参数和系统变量

    一.启动参数 在程序启动时指定的设置项也称之为启动选项(startup options),这些选项控制着程序启动后的行为. 1)在命令行上使用选项 启动服务器程序的命令行后边指定启动选项的通用格式就是 ...

  3. 关于重学Linux的随笔

    毕业已有半年, 现在想想真的后悔, 大学没有认真学Linux, 导致现在Linux操作抓瞎, 连服务器都搭不起来. 下定决心重学Linux, 不追求能比上大佬, 但是要熟练, 常用命令要熟悉. 作为一 ...

  4. 【餐厅】 What kind of food would you like to eat tonight?

    核心句型 What kind of food would you like to eat tonight? 你今晚想吃哪种菜? What would you like to eat ? 你想吃什么? ...

  5. tar命令-解压和压缩文件

    tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...

  6. 201871010135 张玉晶《面向对象程序设计(java)》第十六周学习总结

    第一部分:总结教材14.1-14.3知识内容 并发 • 线程的概念 • 中断线程 • 线程状态 • 多线程调度 • 线程同步 一.线程的概念 1. 程序是一段静态的代码,它是应用程序执行的蓝本. 2. ...

  7. HDU1213:How Many Tables(并查集入门)

    -----------刷点水题练习java------------- 题意:给定N点,M边的无向图,问有多少个连通块. 思路:可以搜索;  可以并查集.这里用并查集练习java的数组使用,ans=N, ...

  8. [Python] Python 模拟登录,并请求

    Python 模拟登录,并请求 # encoding: utf- import requests import socket import time socket.setdefaulttimeout( ...

  9. [ Python入门教程 ] Python基础语法

    Python的语法非常简练,因此用Python编写的程序可读性强.容易理解.本章将介绍Python的基本语法和概念. Python文件类型 1.源代码.Python的源代码的扩展名以py结尾,可直接运 ...

  10. Java 函数式编程(Lambda表达式)与Stream API

    1 函数式编程 函数式编程(Functional Programming)是编程范式的一种.最常见的编程范式是命令式编程(Impera Programming),比如面向过程.面向对象编程都属于命令式 ...