2021-05-18

jQuery效果-动画

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS

作者：鞋裹力

撰写时间：2021/5/18

1、animate()方法用于创建自定义动画

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

动画效果的属性放在花括号里面以及对应的值

Speed写的是动画的执行时间，也是动画的速度

Callback动画完成后所执行的函数名称

注释：

默认情况下，所以HTML元素都有一个静态位置，切无法移动。如需对位置进行操作，要记得首先把元素的css position属性设置为relative、fixed或absolute

当使用animate（）时，必须使用camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。

animate（）目前不支持颜色动画，如果需要生成颜色动画，需要引入颜色动画的插件。

 

2、animate（）使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的面前加上+=或-=

width：+=50px会在原来宽度的基础上加上50px

height：-=50px会在原来高度的基础上减去50

3、animate（）使用预定义的值

可以把属性的动画值设置为“show”、“hide”或“toggle”

Show：展示

Hide：隐藏

Toggle：show、hide的结合，切换的效果

动画执行完毕之后的样式

Left：50px  0pxà50px

Top:50px  0pxà50px

Color:#FF6A00没有变化

4、aninmate（）使用队列功能

可以编写多个animate（）调用，jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。

 

执行一个动画之后
left: 50px 0px--> 50px

 

执行俩个动画之后
top:50px 0px -->50px