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

jQuery笔记合集
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业	jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业	jQuery DOM2-第4次课-从某个元素出发，往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务	jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务	jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业

一、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 停止

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