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'},时间,[动画形式,回调函数]);

3. 让更多效果同时生效

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

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

   $('元素').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 停止

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号