html动画时间函数,jQuery Animate动画函数简介

在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()函数来以动画的形式合并为一张完整的图片。合并后的图片就是上面的这张图片。先来看看效果。

点击还原图片