jQuery三组基本动画与自定义动画操作实例总结


Posted in jQuery onMay 09, 2020

本文实例讲述了jQuery三组基本动画与自定义动画操作。分享给大家供大家参考,具体如下:

jQuery提供了三组基本动画,分别是显示与隐藏、淡入与淡出、滑入与画出,这三组基本动画都是标准的、有规律的的效果,jQuery还提供了一个自定义动画。

1、显示(show)与隐藏(hide)

显示(show)与隐藏(hide)是一组动画

1.1 show方法

show([speed,[easing],[callback]])

  • 参数speed,可选,动画的执行时间

    • 如果不传,就没有动画效果。

    • 毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

    • 固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。

  • 参数callback,可选,执行完动画后执行的回调函数,每个元素执行一次。

  • 参数easing,可选,这里先不讲,后面统一讲

1.2 hide方法

与show方法的用法完全一致。

1.3 原理

show和hide修改的是元素的width、height、opacity。

2、滑入(sliderDown)与隐藏(sliderUp)

滑入(slideUp)与滑出(slideDown)是一组动画,效果与卷帘门类似
slideUp/slideDown,使用方法与show/hide基本一致。

2.1 用法

slideDown([speed],[easing],[callback])

  • 参数speed,可选,动画的执行时间

    • 如果不传,默认为normal,注意区分show/hide

    • 毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

    • 固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。

  • 参数callback,可选,执行完动画后执行的回调函数,每个元素执行一次。

  • 参数easing,可选,这里先不讲,后面统一讲

2.2 滑入画出切换(slideToggle)

$(selector).slideToggle(speed,callback);
如果是隐藏状态,那么执行slideDown操作,如果是显示状态,那么执行slideUp操作。

2.3 原理

slideDown和slideUp修改的是元素的height,通过高度变化(向下、向上增大)来动态地显示所有匹配的元素。

3、淡入(fadeIn)与淡出(fadeOut)

fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

3.1 用法

fadeIn([speed],[easing],[callback])

  • 参数speed,可选,动画的执行时间

    • 如果不传,默认为normal

    • 毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

    • 固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。

  • 参数callback,可选,执行完动画后执行的回调函数,每个元素执行一次。

  • 参数easing,可选,这里先不讲,后面统一讲

3.2 淡入淡出切换(fadeToggle)

fadeToggle([speed,[easing],[callback]])
如果当前元素处于隐藏状态,那么执行fadeIn操作,如果处于显示状态,那么执行fadeOut操作。

3.3 淡入淡出到某个值(fadeTo)

fadeTo(speed,opacity,[easing],[callback]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

  • 参数speed,必须

  • 参数opacity,0-1之间的数值(比如0.4),表示淡到某一个值。

  • 参数callback,可选,执行完动画后执行的回调函数,每个元素执行一次。

与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!

fade系列方法:修改的是元素的opacity。

4、三组基本动画总结

  1. Query给我们提供了三组动画,show/hide、slideUp/slideDown、fadeIn/fadeOut。

  2. 动画切换方法:slideToggle、fadeToggle,注意:show和hide没有切换的方法。

  3. 淡入淡出到某个值:fadeTo方法。

  4. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

  5. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变

5、自定义动画(animate)

animate(params,[speed],[easing],[callback])

  • 参数params,必须,要执行动画的CSS属性,带数字

  • 参数speed,可选,执行动画时长

  • 参数easing,可选,这里先不讲,后面统一讲

  • 参数callback,可选,执行完动画后执行的回调函数,每个元素执行一次。

6、easing参数

现在来说说easing参数的作用,这个参数是控制动画的速度样式,这个参数只有两个取值:

  • swing:摆钟运动,在开头和结尾移动慢,在中间移动速度快。

  • linear:匀速移动。

在不指定easing参数时,jQuery动画默认值是swing。

7、动画队列

在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行(联想:地铁进站)。

8、停止动画

要停止动画,可以使用stop()方法。stop(clearQueue, jumpToEnd)。

8.1、stop()

stop方法接受两个参数,这个两个参数都是可选的,为Boolean值:

  • clearQueue,是否清除动画队列;

  • jumpToEnd,是否跳转到动画的最终效果。

当然了,一般我们不需要传递参数,直接使用stop()。如果直接使用stop()方法,则会理解停止当前正在执行的动画,如果接下来还有动画等待进行,则以当前状态开始接下来的动画。

8.2、判断元素是否处于动画状态

动画积累:在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate动画时,就会出现动画积累。

解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

if( ! $(element).is(":animate") ){  //判断元素是否正处于动画状态
  //如果当前没有进行动画,则添加新的动画
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
jquery实现手风琴案例
May 04 #jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
You might like
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php取出数组单个值的方法
2018/03/12 PHP
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
JS分页的实现(同步与异步)
2017/09/16 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
angular多语言配置详解
2019/05/16 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
python分割和拼接字符串
2013/11/01 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python调用外部程序的实操步骤
2019/03/04 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
后勤人员岗位职责
2013/12/17 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
领导工作表现评语
2015/01/04 职场文书
开场白怎么写
2015/06/01 职场文书