jQuery自定义动画-第8次课-animate-stop函数-附案例

一、animate 自定义动画

语法：

$(selector).animate({styles},speed,"swing|linear",callback)
//解释：
$('元素').animate({样式},时间,[动画形式,回调函数]);

注：

样式的属性使用驼峰命名(padding-left–>paddingLeft)，值可以是"show",“hide”,“toggle”,或者数值,包括"-=数值"、“+=数值”，带单位

参数说明：

1. 样式：需要有值的变化的样式才有效果

比如：

$(‘元素’).animate({left:‘100px’});

或特有的值：“show”,“hide”,“toggle”

a、模拟slideDown()

$(‘元素’).animate({height:‘show’},400);

b、模拟fadeIn()

$(‘元素’).animate({opcity:‘show’},400);

c、模拟的是show()

$(‘元素’).animate({height:‘show’,width:‘show’,opcity:‘show’},400);

2. 速度(时间)，默认值为400

毫秒：200,400,800

单词：“fast”,“slow”,“normal”

3. 运动形式

只有两种：swing（慢快慢，默认），linear（匀速）

4. 回调函数（可选）

回调函数一般作为函数的参数中

完成了某件事情后会自动执行的方法

比如这里：当运动结束后，如果写了函数，则该函数会自动执行

JQ中的方法里面的函数大部分都是回调函数

二、用法例举

1. 在原有的位置上继续运动（自增）

$('元素').animate({left:'+=50px'},时间,[动画形式,回调函数]);
//每次都是在原来的位置上运动50个像素

2. 模拟特效函数：show、hide、toggle等

//比如：
1.模拟 slideDown
$('元素').animate({height:'show'},时间,[动画形式,回调函数]);

2. 让更多效果同时生效

//比如宽度、高度、透明度或位移一起改变
$('元素').animate({height:'100px',width:'100px',left:'100px'},时间,[动画形式,回调函数]);

2. 按顺序运动(链式操作)

$('元素').animate({height:'200px'},400)
        .animate({width:'200px'},400)
        .animate({left:'100px'},400);

三、stop函数

解决动画排队的问题。

可以用在特效的那9个方法和animate方法之前。

$('元素').stop().animate({height:'show'},时间,[动画形式,回调函数]);
$('元素').stop(true).animate({height:'show'},时间,[动画形式,回调函数]);
$('元素').stop(true,true).animate({height:'show'},时间,[动画形式,回调函数]);

stop的参数说明：

1. 没有参数：使用stop方法可以停止当前对象上正在运行的动画序列，后面的动画继续执行，类似于循环中的continue关键字
2. 如果第一个参数为true，表示是否停止被选元素的所有加入队列的动画，后面的动画不再执行了，即使是当前已经执行到一半，后一半也不再执行，类似于循环中的break语句。
3. 如果两个参数都为true，表示让正在运行的动画继续运行直到结束，相当于也是break。但是会走完本次动画。

相关单词

1. animate 动画
2. swing 摇摆，摆动
3. linear 匀速
4. stop 停止

案例、笔记、作业：imqd.cn/?p=202