首页 / 脚本样式 / jQuery / jQuery入门（8） 动画效果

jQuery入门（8） 动画效果2013-05-22 引路蜂移动软件 前面的hide/show,slide in/out其实也具有动画效果，本篇介绍使用animate（）实现自定义动画效果 。

基本语法如下：

$（selector）.animate（{params},speed,callback）;

必选的参 数为params,定义CSS用于动画效果的的属性。

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在animate（）方法结束后调用。

比如下面的例子，将一个<center>标记移动到其Left属性等于 250px.

$（"button"）.click（function（）{ $（"center"）.animate（{left:"250px"}）; }）;

要注意的是，缺省情况下，所有HTML元素的位置的固定的，不能移动，因此如果需要修改 HTML元素的位置，需要事先将它们的CSS属性的位置设置为relative, fixed, 或absolute。

使 用animate 修改多个属性

下面的例子，可以使用animate同时修改多个属性：

$（"button"）.click（function（）{ $（"center"）.animate（{ left:"250px", opacity:"0.5", height:"150px", width:"150px" }）; }）;

注意：基本所有的CSS属性都可以在animation中使用，颜色修改不在jQuery核心库中，需 要Color Animiation插件来完成。

使用属性相对值

对于CSS属性，除了上面使用的绝对大小 ，也可以使用相对值来定义，使用 “+”“-”。

$（"button"）.click（function（）{ $（"center"）.animate（{ left:"250px", height:"+=150px", width:"+=150px" }）; }）;

使用预定义的值

也可以使用预定义的值为属性赋值。比如”show”, “hide”, 或 “ toggle”:

$（"button"）.click（function（）{ $（"center"）.animate（{ height:"toggle" }）; }）;

使用队列功能

缺省jQuery支持将多个animation功能串起来构从一个队列，然后一个一 个的执行队列中的指令。

比如：

$（"button"）.click（function（）{ var center=$（"center"）; center.animate（{height:"300px",opacity:"0.4"},"slow"）; center.animate（{width:"300px",opacity:"0.8"},"slow"）; center.animate（{height:"100px",opacity:"0.4"},"slow"）; center.animate（{width:"100px",opacity:"0.8"},"slow"）; }）;

或

$（"button"）.click（function（）{ var center=$（"center"）; center.animate（{left:"100px"},"slow"）; center.animate（{fontSize:"3em"},"slow"）; }）;