jquery动画控制非css属性
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属性的更多相关文章
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- jquery的animate()方法也可设置非css属性
如题,举例: $('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-=" ...
- jquery之往一个CSS属性里写入多个值
<html> <head> <title>test</title> <base href="<%=basePath%>&qu ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- jQuery修改css属性
jQuery CSS 操作jQuery 拥有三种用于 CSS 操作的重要函数:$(selector).css(name,value)$(selector).css({properties})$(sel ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
随机推荐
- SpringBoot 整合Mybatis操作数据库
1.引入依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId> ...
- 【Mysql】了解Mysql中的启动参数和系统变量
一.启动参数 在程序启动时指定的设置项也称之为启动选项(startup options),这些选项控制着程序启动后的行为. 1)在命令行上使用选项 启动服务器程序的命令行后边指定启动选项的通用格式就是 ...
- 关于重学Linux的随笔
毕业已有半年, 现在想想真的后悔, 大学没有认真学Linux, 导致现在Linux操作抓瞎, 连服务器都搭不起来. 下定决心重学Linux, 不追求能比上大佬, 但是要熟练, 常用命令要熟悉. 作为一 ...
- 【餐厅】 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 ? 你想吃什么? ...
- tar命令-解压和压缩文件
tar命令 可以用来压缩打包单文件.多个文件.单个目录.多个目录. Linux打包命令_tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包 tar ...
- 201871010135 张玉晶《面向对象程序设计(java)》第十六周学习总结
第一部分:总结教材14.1-14.3知识内容 并发 • 线程的概念 • 中断线程 • 线程状态 • 多线程调度 • 线程同步 一.线程的概念 1. 程序是一段静态的代码,它是应用程序执行的蓝本. 2. ...
- HDU1213:How Many Tables(并查集入门)
-----------刷点水题练习java------------- 题意:给定N点,M边的无向图,问有多少个连通块. 思路:可以搜索; 可以并查集.这里用并查集练习java的数组使用,ans=N, ...
- [Python] Python 模拟登录,并请求
Python 模拟登录,并请求 # encoding: utf- import requests import socket import time socket.setdefaulttimeout( ...
- [ Python入门教程 ] Python基础语法
Python的语法非常简练,因此用Python编写的程序可读性强.容易理解.本章将介绍Python的基本语法和概念. Python文件类型 1.源代码.Python的源代码的扩展名以py结尾,可直接运 ...
- Java 函数式编程(Lambda表达式)与Stream API
1 函数式编程 函数式编程(Functional Programming)是编程范式的一种.最常见的编程范式是命令式编程(Impera Programming),比如面向过程.面向对象编程都属于命令式 ...