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