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 Plupload上传插件的使用
Apr 19 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery无冲突模式详解
Jan 17 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中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python可变参数函数用法实例
2015/07/07 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python中的unittest框架实例详解
2021/02/05 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
教师自荐信
2013/12/10 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
婚前协议书范本
2014/10/27 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
初中生物教学反思
2016/02/20 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang
字节飞书面试promise.all实现示例
2022/06/16 Javascript