jQuery 动画
让我们学习如何使用jQuery的 animate() 方法在网页或者其它jQuery(Javascript)应用程序中创建自定义动画。
jQuery animate() 方法
jQuery的 animate() 方法用于通过改变DOM元素的CSS属性值(例如宽度、高度、外边距、内边距、透明度、上边距、左边距等)来创建自定义动画。
下面是 animate() 方法的简单语法:
jQuery animate()方法不能用于动画非数字属性,如颜色或背景颜色等。不过,您可以使用jQuery插件 jQuery.Color 来动画化这些属性。
您可以应用任何jQuery 选择器 来选择任何DOM元素,然后使用jQuery animate() 方法进行动画处理。下面是对所有参数的描述,这使您可以完全控制动画−
- properties − 必需的参数,定义要动画处理的CSS属性,此为调用中唯一的强制参数。
-
speed − 一个可选的字符串,表示三个预定义的速度之一(”slow”、”normal”或”fast”),或运行动画的毫秒数(例如:1000)。
-
callback − 一个可选参数,表示在动画完成时要执行的函数。
动画前提条件
(a) - animate()方法不会将隐藏的元素作为效果的一部分而显示出来。例如,给定$(selector).hide().animate({height: “20px”}, 500),动画会运行,但元素仍然处于隐藏状态。
(b) - 要作为动画的一部分操纵DOM元素的位置,首先我们需要将其位置设置为 relative 、 fixed 或 absolute ,因为默认情况下,所有HTML元素都具有 static 位置,无法使用 animate() 方法移动它们。
示例
以下示例展示了如何使用 animate() 方法将一个<div>
元素向右移动,直到其达到250px的left属性。然后,当我们点击 left 按钮时,相同的<div>
元素将返回到其初始位置。
自定义速度的动画
我们可以使用不同的速度来对DOM元素的不同CSS数字属性(比如宽度、高度或左边距)进行动画操作。
示例
让我们重写上面的示例,在这个示例中,我们将使用速度参数为1000毫秒来对<div>
元素的右移进行动画操作,并使用速度参数为5000毫秒来对左移进行动画操作。
带预定义值的动画
我们可以使用字符串 ‘show’ 、 ‘hide’ 和 ‘toggle’ 作为 CSS 数值属性的值。
示例
以下是一个示例,我们通过两个按钮来设置元素的 left 属性为 hide 或 show 。
请注意,使用这些值设置任何数值型 CSS 属性将产生相同的结果。例如,如果将元素的宽度或高度设置为 hide ,则无论设置宽度属性还是高度属性,都会隐藏该元素。
多属性动画
jQuery的 animate() 方法允许我们同时对一个元素的多个CSS属性进行动画效果。
示例
以下是一个示例,动画效果作用于一个<div>
元素上。当我们点击” 右移 “按钮时,这个<div>
元素向右移动,直到left属性值达到250px,同时元素的透明度减少到0.2,并且盒子的宽度和高度减小到100px。接下来,当我们点击” 左移 “按钮时,这个盒子返回到初始位置和大小。
具有队列功能的动画
考虑一种情况,你需要应用多个动画,这意味着你需要连续多次调用animate()
方法。在这种情况下,jQuery通过先进先出(FIFO)队列处理这些动画请求,并允许根据你的创意创建有趣的动画。
示例
以下是一个示例,我们连续四次调用animate()
方法,将一个<div>
沿着不同的方向依次移动。