jQuery动画效果

开发工具与关键技术：Visual Studio 2015 JQuery
作者：郭程富
撰写时间：2020年5月4日

知识点：
  ① show() 显示隐藏的匹配元素。
  ② hide() 隐藏显示的元素。
  ③ toggle()如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
       show([speed],[easing],[fn]) 显示隐藏的匹配元素
         hide([speed],[easing],[fn]) 隐藏显示的元素
         toggle([speed],[easing],[fn])
          用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
          如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
        参数说明：
       speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow（600），normal，fast(200)"
       easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
       fn:在动画完成时执行的函数，每个元素执行一次
       说明：通过style属性中的display值控制元素的隐藏与显示，三种方法的参数说明可参考jQuery的API。
④ slideDown() 通过高度变化（向下增大）来动态地显示所有匹配的元素。
  ⑤ slideUp() 通过高度变化（向上减小）来动态地隐藏所有匹配的元素。
  ⑥ slideToggle() 通过高度变化来切换所有匹配元素的可见性。
       slideDown([speed],[easing],[fn])
      通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
      这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来
      slideUp([speed],[easing],[fn])
      通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
      这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来
      slideToggle([speed],[easing],[fn])
      通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
      参数说明：
      speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
      easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
      fn:在动画完成时执行的函数，每个元素执行一次。
  ⑦fadeOut() 淡出效果。
  ⑧fadeIn() 淡入效果。
  ⑨fadeToggle() 淡入/出效果切换。
  ⑩fadeTo() 改变选定元素的透明度。
      fadeOut([speed],[easing],[fn])
      通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
      这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
        fadeIn([speed],[easing],[fn])
      通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
      这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
        fadeToggle([speed],[easing],[fn])
      通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
      这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
      参数说明：
      speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast"
      easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
            fn:在动画完成时执行的函数，每个元素执行一次
            opacity:透明度
      fadeTo(speed,opacity,[easing],[fn])//0~1
      把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
      这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
还有一个自定义的动画。