2021-05-08

animate()

用于创建自定义动画的函数。

语法：

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

参数：

params：必填，定义需要执行动画的属性和终值(动画执行完后属性的值,属性值使用驼峰)

speed：可选，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒数(1000)。

callback：可选，动画完成后所执行的函数。

注：

1：如果要为元素设置移动的动画，需要先为元素设置position属性定位。否则将不会执行移动的动画。（设置属性left，top或

right，bottom让元素移动到指定的位置）

2：animate()目前不支持颜色动画，如果需要生成颜色动画，需要引入颜色动画的插件。

3：属性的终值可以设置为相对值：属性值前加上 += 或 -= 在原来的基础上加上或减去。

例:

1. 先写一个div并设置好初始值

 

动画执行前的样式

left: 0px

top: 0px

color: #ff6a00

 

动画执行完毕之后的样式

left: 50px   0px --> 50px

top: 50px   0px --> 50px

color: #ff6a00   没有变化

animate()队列

在animate()动画后面再跟animate()动画(数量随意);

语法:

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

例:

1、下面是一个animate（）队列

1. 执行一个动画之后

left: 50px   0px --> 50px

1. 执行俩个动画之后

top: 50px   0px --> 50px