jQuery中的滑动切换方法

jQuery中提供了多种滑动切换方法，可以将页面中的内容以不同的方式滑动显示或隐藏。下面将介绍其中三种常用方法。

slideDown()

slideDown()方法可以使被选元素从上往下滑动显示。

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

• speed参数为可选，表示滑动的速度，可以设置为'fast'、'slow'或毫秒数。默认为400毫秒。
• easing参数为可选，表示滑动的缓动函数，可以是字符串如'linear'、'swing'，也可以是自定义的函数。默认为'swing'。
• callback参数为可选，表示滑动完成后执行的回调函数。

例：

$("#btn").click(function(){
  $("#div1").slideDown();
});

该示例会使id为div1的元素从上往下滑动显示。

slideUp()

slideUp()方法可以使被选元素从下往上滑动隐藏。

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

• speed、easing和callback参数与slideDown()方法相同。

例：

$("#btn").click(function(){
  $("#div1").slideUp();
});

该示例会使id为div1的元素从下往上滑动隐藏。

slideToggle()

slideToggle()方法可以根据元素目前的状态，实现自动切换滑动显示或隐藏。

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

• speed、easing和callback参数与slideDown()方法相同。

例：

$("#btn").click(function(){
  $("#div1").slideToggle();
});

该示例会使id为div1的元素在切换滑动显示和隐藏之间自动切换。

上述三个方法都是通过改变CSS的height属性实现元素的滑动显示或隐藏，因此需要使用height属性设置元素的高度，或者使用max-height或min-height属性进行限制。