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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现手风琴特效
Jan 11 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处理斐波那契数列非递归方法
2012/02/04 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
2010/11/25 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
javascript date格式化示例
2013/09/25 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python: 传递列表副本方式
2019/12/19 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
计算机专业毕业生的自我评价
2013/11/18 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
redis实现的四种常见限流策略
2021/06/18 Redis
分析并发编程之LongAdder原理
2021/06/29 Java/Android