jQuery的animate函数-阿里云开发者社区

开发者社区> 大江小浪> 正文

jQuery的animate函数

简介: jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。   用法如下: .animate( properties[, duration ][, easing ][, complete ]) 或者 .animate( properties, options ),其中 options 包含了duration、easing、queue、specialEasing、step、progress、complete、done、fail、always等多个属性。
+关注继续查看

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。
 
用法如下:
.animate( properties[, duration ][, easing ][, complete ])
或者
.animate( properties, options ),其中 options 包含了duration、easing、queue、specialEasing、step、progress、complete、done、fail、always等多个属性。
 
animate函数允许我们在所有使用数字值的CSS属性上创建动画效果。唯一必须的属性是一个 CSS 属性对象。例如:
 
$('.class').animate({
     left:"100"
});
 
Animation Properties and Values
 
所有的可创建动画效果的属性必须是一个单一的数值,例如 宽度(width)、高度(height)、左边距(left)等,但是不能是 background-color。注:要实现颜色的动画效果,必须使用 jQuery.Color() 插件。除非特殊声明,否则这些属性的单位都按照像素处理,可以使用的其他单位还包括 em 和 % 百分比。
 
除了一些样式属性外,像 scrollTop 和 scrollLeft 这样的一些非样式属性也可以实现动画效果。
 
缩写的CSS属性不被支持。例如,如果想对边框的宽度做一个动画效果,那么必须提前明确定义边框的宽度,而不能使用 auto。对于字体尺寸,可以使用 fontsize 或者 font-size,而不能使用 font。
 
对于每一个指定的值,我们可以使用“show”、“hide”、“toggle”三个字符串,来指定在何时使用动画效果。
 
动画属性也可以使用相对值。如果使用“+=”、“-=”这样的字符串,则会使用给定的步长进行属性值的计算。
 
 
Duration 持续时间
 
 
Duration 的单位为微秒,数值越高动画效果越慢,反之则越快。默认的时间是 400 毫秒。“fast”默认为 200 毫秒,“slow”默认为 600 毫秒。
 
Complete Function 完成后的函数动作
 
如果指定,complete 回调函数会在动画执行完毕后被触发。这在设计多个顺序发生的动画时特别有用。这个函数没有任何参数,但是 this 被设置为触发动画的DOM元素。如果多个元素发生动画,则回调在每个动画执行完后都会被执行,而不是在所有动画执行完后执行一次。
 
Step Function 步长函数
 
在animate的第二种调用方式中提供了一个step的选项,这是一个回调函数,可以在每一个step执行时被触发。这个函数在自定义动画类型时非常有用,可以在动画触发后对其做出更改。step函数接收 now 和 fx 两个参数,this 设置为发生动画的DOM元素。
 
now 表示发生动画效果属性的当前值;
fx 是对 jQuery.fx 的引用,包含了动画元素的一系列属性,例如 fx.elem.id,其中的 start 和 end 是动画属性的初始值和最终值,prop 指被改变的属性。
 
Easing 放开动作
 
这个属性是一个字符串,来指定动画过程中不同的时间点所使用的速度,默认的属性为“swing”,如果需要动画保持一个均匀的速度,可以使用“linear”。更多的属性可以使用插件,可以参考 jQuery UI suite
 
所有的jQuery动画效果,都可以使用 jQuery.fx.off = true 来关闭,实际上是设置了 duration 为0.更多的信息,可以参考 jQuery.fx.off。
 
利用jQuery的Animate函数和Effect插件,做了一个类似于IBM首页的焦点图切换效果,可以参考 https://github.com/cocowool/RoseFocus
 

参考资料:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Matlab中Rand()函数用法
一、理论准备        matlab函数randn:产生均值为0,方差 σ^2 = 1,标准差σ = 1的正态分布的随机数或矩阵的函数。       用法:Y = randn(n),返回一个n*n的随机项的矩阵。
977 0
[复变函数]第06堂课 2.1 解析函数的概念与 Cauchy-Riemann 方程 (续)
2. 解析函数及其简单性质 (1) 定义: a. 若 $w=f(z)$ 在区域 $D$ 内可微, 则称 $f$ 在 $D$ 内解析; b. 若 $w=f(z)$ 在 $z_0$ 处的某邻域内解析, 则称 $f$ 在 $z_0$ 处解析; c.
628 0
oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date]
oracle                                       -->                             mysql to_char(sysdate,'yyyy-mm-dd')-->date_format(sysdate(),'%Y-%m-%d');t...
1616 0
[实变函数]5.1 Riemann 积分的局限性, Lebesgue 积分简介
1 Riemann 积分的局限性                     (1) Riemann 积分与极限的条件太严:    $$\bex    f_k\rightrightarrows f\ra \lim \int_a^b f_k    =\int_a^b \lim f_k.
645 0
+关注
大江小浪
平心静气,破浪劈坚!
292
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载