jQuery入门教程：使用animate实现自定义动画效果.pdfVIP

jQuery(8):动画效果

前面的hide/show,slidein/out其实也具有动画效果，本篇介绍使用animate()实现自定义动画效果。

基本语法如下：

$(selector).animate({params},speed,callback);必选的参数为params，定义

CSS用于动画效果的属性。可选参数speed给出动画效果的时间，可以使用“

slow”,”fast”或是数值（毫秒）。第二个可选参数为回调函数，在animate()方

法结束后调用。比如下面的例子，将一个div标记移动到其left属性等于

250px。

[javascript]查看原文

print

1.$(button).click(函数(){2.$

(div).animate({left:250px});3.});

需要注意的是，默认情况下，所有HTML元素的位置是固定的，不能移动。因此，如果需要修改HTML元素的位置，需要事

先将它们的CSS属性位置设置为relative、fixed或absolute。

使用animate修改多个属性

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

[javascript]查看原文

打印？

1.$(按钮).click(函数(){

2.$(div).animate({

3.left:250px,

4.：0.5，

5.高度：150px，

6.宽度：150px

7.});

8.});

基本所有的CSS属可以在animation中使用，颜色修改不在jQuery库中，需要ColorAnimation插件来完成。

注意：

使用属性相对值

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

[javascript]查看原文

打印？

1.$(button).click(function(){

jQuery(8):动画效果

前面的hide/show,slidein/out其实也具有动画效果，本篇介绍使用animate()实现自定义动画效果。

基本语法如下：

$(selector).animate({params},speed,callback);

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

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

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

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

[javascript]viewincopy

print?

1.$(button).click(function(){

2.$(div).animate({left:250px});

3.});

要注意的是，缺省情况下，所有HTML元素的位置的固定的，不能移动，因此如果需要修改HTML元素的位置，需要事先将它

们的CSS属性的位置设置为relative,fixed,或absolute。

使用animate修改多个属性

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

[javascript]viewincopy

print?

1.$(button).click(function(){

2.$(div).animate({

3.left:250px,

4.opacity:0.5,

5.height:150px,

6.width:150px

7.});

8.});

注意：基本所有的CSS属可以在animation中使用，颜色修改不