在jQuery中为我们提供了一个animate函数,我们可以使用它来完成一些复杂的动画效果。通常网页动画效果都是通过改变CSS属性值来实现的,而通过jQuery animate()函数,这些操作都将变得十分简单。
jQuery animate()函数
jQuery animate()的定义如下:
animate(params,[speed],[easing],[fn])
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left。
每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
animate()函数的参数含义如下:
params:一组包含作为动画属性和终值的样式属性和及其值的集合。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)。
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。
fn:在动画完成时执行的函数,每个元素执行一次。
例如一个animate动画可以像下面这样书写:
$( "#panel" ).animate({
// CSS属性和值
}, 5000, "linear", function() {
// 动画结束后的处理函数
});
上面的代码中,第一个参数是一组CSS属性和值,第二个参数是动画的持续时间,第3个参数是动画的easing类型,第4个参数是动画结束后的回调函数。
上面的介绍都是一些理论上的知识,下面我们将要列举3个关于jQuery animate()函数的例子。
图片碎片还原动画
我们的第一个例子是将一张图片切割为8个大小相等的碎块,然后通过jQuery animate()函数来以动画的形式合并为一张完整的图片。合并后的图片就是上面的这张图片。先来看看效果。
点击还原图片