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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery实现回到顶部效果
Oct 19 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
destoon设置自定义搜索的方法
2014/06/21 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php组合排序简单实现方法
2016/10/15 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
jQuery的学习步骤
2011/02/23 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python Socket传输文件示例
2017/01/16 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
SQL Server笔试题
2012/01/10 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
小学家长会邀请函
2014/01/23 职场文书
市场营销求职信范文
2014/02/21 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
辞职信如何写
2015/02/27 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server