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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
实例解析Array和String方法
2016/12/14 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
python分布式编程实现过程解析
2019/11/08 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
基于python实现坦克大战游戏
2020/10/27 Python
python pillow库的基础使用教程
2021/01/13 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
文科生自我鉴定
2014/02/15 职场文书
产品包装策划方案
2014/05/18 职场文书
工作证明格式及范本
2014/09/12 职场文书
公司员工安全协议书
2014/11/21 职场文书
手术室护士个人总结
2015/02/13 职场文书
作弊检讨书范文
2015/05/06 职场文书
社区服务活动感想
2015/08/11 职场文书