1、show / hide
直接以无参数形式调用show()
和hide()
,会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画。
时间以毫秒为单位,但也可以是'slow'
,'fast'
这些字符串。
toggle()
方法则根据当前状态决定是show()
还是hide()
。
2、slideUp / slideDown
show()
和hide()
是从左上角逐渐展开或收缩的,而slideUp()
和slideDown()
则是在垂直方向逐渐展开或收缩的。
slideToggle()
则根据元素是否可见来决定下一步动作。
3、fadeIn / fadeOut
fadeIn()
和fadeOut()
的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity
属性来实现。
fadeToggle()
则根据元素是否可见来决定下一步动作。
4、自定义动画
animate()
,它可以实现任意动画效果,我们需要传入的参数就是DOM元素最终的CSS状态和时间。
animate()
还可以再传入一个函数,当动画结束时,该函数将被调用。
这个回调函数参数对于基本动画也是适用的。
5、串行动画
jQuery的动画效果还可以串行执行,通过delay()
方法还可以实现暂停。