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

简介: 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);

  1. 速度(时间),默认值为400

毫秒:200,400,800

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

  1. 运动形式

只有两种:swing(慢快慢,默认),linear(匀速)

  1. 回调函数(可选)

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

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

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

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

二、用法例举
  1. 在原有的位置上继续运动(自增)
$('元素').animate({left:'+=50px'},时间,[动画形式,回调函数]);
//每次都是在原来的位置上运动50个像素
  1. 模拟特效函数:show、hide、toggle等
//比如:
1.模拟 slideDown
$('元素').animate({height:'show'},时间,[动画形式,回调函数]);
  1. 让更多效果同时生效
//比如宽度、高度、透明度或位移一起改变
$('元素').animate({height:'100px',width:'100px',left:'100px'},时间,[动画形式,回调函数]);
  1. 按顺序运动(链式操作)
$('元素').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

相关文章
N..
|
19天前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
10 1
|
24天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
11 0
|
3月前
|
机器学习/深度学习 JavaScript
|
23天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
9 0
|
23天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
5 0
|
23天前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
8 1
|
24天前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
24天前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
24天前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
9 0
|
24天前
|
JavaScript
初识jQuery的案例
初识jQuery的案例
4 0