本文共 1282 字，大约阅读时间需要 4 分钟。

1.淡入与淡出

原理是:不断改变元素的透明度(opacity)来实现的

淡入:fadeIn([speed],[easing],[fn])

(淡入为带动画的显示)元素style的变化过程如下:

display:block

淡出:fadeOut([speed],[easing],[fn])

(淡出为带动画的隐藏)元素style的变化过程如下:

display:none

切换显示隐藏fadeToggle([speed,[easing],[fn]])

(带动画的切换显示隐藏)

2.上下滑动

原理是:不断改变元素的高度来实现的

向下滑:slideDown([speed],[easing],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

向上滑:slideUp([speed,[easing],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

切换:slideToggle([speed],[easing],[fn])

如果当前状态是伸展点击切换就收缩，反之。

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

3.显示与隐藏

显示:show([speed,[easing],[fn]])

显示隐藏的匹配元素。

这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

如果想要加动画，就给其动画加个时间，在变化过程中实际上改变的是高度、宽度、透明度

隐藏:hide([speed,[easing],[fn]])

隐藏显示的元素

这个就是 ‘hide( speed, [callback] )’ 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

如果想要加动画，就给其动画加个时间，在变化过程中实际上改变的是高度、宽度、透明度

切换:toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

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