【jQuery】使用slideUp()和slideDown()方法的滑动效果

可以使用

slideUp()

和

slideDown()

方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：

$(selector).slideUp(speed,[callback])

和

$(selector).slideDown(speed,[callback])

其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。

要注意的是：

slideDown()

仅适用于被隐藏的元素；

slideup()

则相反。

例如，调用

slideUp()

和

slideDown()

方法实现页面中元素的向上和向下的滑动效果，如下图所示：





在浏览器中显示的效果：





从图中可以看出，根据按钮中显示的内容，分别调用

slideUp()

和

slideDown()

方法，实现图片元素向上和向下的滑动效果，当每个滑动效果完成时，再通过回调函数改变按钮中显示内容。

滑动与淡入淡出的区别：滑动改变元素的高度，淡入淡出改变元素的透明度。