本文主要介绍了Web前端—JQuery 动态显示和隐藏（动画），通过具体的内容向大家展现，希望对大家web前端jQuery开发的学习有所帮助。

JQuery 高级之动画

前言

jQuery动画的三种方式

1. 默认的显示和隐藏方式

2.滑动显示和隐藏方式

3.淡入淡出显示和隐藏方式

前言

最近复习了一下jQuery的一些内容，特此整理一下一些能用的得到的知识点，以前才学jQuery的时候压根就没有注意到那么多的细节，另外最近一直都在整理前端的一些工作中学到的小经验，大概还会有十篇左右的内容，就会慢慢开始整理后端，框架，以及数据库的一些小知识点

jQuery动画的三种方式

今天的知识点就一个jQuery动画的三种表示方式：

默认显示和隐藏方式

滑动显示和隐藏方式

淡入淡出显示和隐藏方式

1. 默认的显示和隐藏方式

1.1. show([speed,[easing],[fn]])

->如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

1.2. hide([speed,[easing],[fn]])

->隐藏,如果选择的元素是隐藏的，这个方法将不会改变任何东西。

1.3. toggle([speed],[easing],[fn])

->如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1. speed：动画的速度，可以自定义值(如：1000)毫秒数，它还有三个预定义的值(“slow”,“normal”, “fast”)

2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"

      ->swing：动画执行时效果是 先慢，中间快，最后又慢

      -> linear：动画执行时速度是匀速的

3. fn：在动画完成时执行的函数，每个元素执行一次。

以下所有的的speed，easing，function都是一样的

2.滑动显示和隐藏方式

2.1. slideDown([speed],[easing],[fn])

->通过高度变化（向下增大）来动态地显示所有匹配的元素。

2.2. slideUp([speed,[easing],[fn]])

->通过高度变化（向上减小）来动态地隐藏所有匹配的元素

2.3. slideToggle([speed],[easing],[fn])

->与toggle功能相同，只是显示的动画效果不同

3.淡入淡出显示和隐藏方式

3.1. fadeIn([speed],[easing],[fn])

->淡入效果（渐渐浮现）

3.2. fadeOut([speed],[easing],[fn])

->淡出效果（渐渐隐藏）

3.3. fadeToggle([speed,[easing],[fn]])

->与toggle功能相同，只是显示的动画效果不同

用法示例如下（示例）：

 <img id="imgpic" src="../img/test.jpg" width="600px" height="600px"/>

 //默认方式

         $("#imgpic").toggle("slow");//

         $("#imgpic").show(5000,"linear");//5秒后匀速显示

         $("#imgpic").hide(5000,"swing");//5秒后隐藏，速度先先慢，中间快，最后又慢

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取最新技术干货教程资源