JQuery 动态显示和隐藏（动画）_bug_producter的博客

---

前言

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

---

jQuery动画的三种方式

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

1. 默认显示和隐藏方式
2. 滑动显示和隐藏方式
3. 淡入淡出显示和隐藏方式

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秒后隐藏，速度先先慢，中间快，最后又慢

你可能会感兴趣~~《jQuery遍历的几种方式》
~~《JQuery 选择器重点内容》

创作不易，如果这篇文章能够帮助到你，希望能关注或收藏一下博主，如果文章内容有问题也可留言讨论，我们一起学习，一起进步！！