jQuery 效果 - 滑动

jQuery 滑动方法可使元素上下滑动。

Click to slide down/up the panel

Because time is valuable, we deliver quick and easy learning.

At W3Schools, you can study everything you need to learn, in an accessible and handy format.


实例

jQuery slideDown()
演示 jQuery slideDown() 方法。

jQuery slideUp()
演示 jQuery slideUp() 方法。

jQuery slideToggle()
演示 jQuery slideToggle() 方法。


jQuery 滑动方法

通过 jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法:

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法:

实例

$("#flip").click(function(){
  $("#panel").slideDown();
});
亲自试一试 »


jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法:

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法:

实例

$("#flip").click(function(){
  $("#panel").slideUp();
});
亲自试一试 »

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown()slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法:

实例

$("#flip").click(function(){
  $("#panel").slideToggle();
});
亲自试一试 »

jQuery 实验

学习训练

练习题:

使用 jQuery 方法向上滑动 <div> 元素。

$("div").();

开始练习


jQuery 效果参考手册

如需全面查阅 jQuery 效果,请访问我们的 jQuery 效果参考手册