jQuery的animate函数

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

参考资料:

1、animate of jQuery

2、jQuery的Index方法

3、jQuery UI effect

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享圈

杨老师课堂之JavaScript案例之自动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

15640
来自专栏木子昭的博客

<布局>子级相对级居中对齐的几种方式

? 一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50...

29840
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

19180
来自专栏小古哥的博客园

Vue入门

一、引入vue 方法一:下载vue.js,然后像引用jquery一样,在HTML中使用script标签引入 <script src="https://unpkg...

40180
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

50030
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

1K10
来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

37250
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

我们把 html 文件看成一个文档,因为万物皆对象,所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象,比如 div 标签,p 标签等。

12620
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

JavaScript 开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

9640
来自专栏沈唁志

jQuery中的9个选择器

15720

扫码关注云+社区

领取腾讯云代金券