肉渣教程

jQuery Slide

上一节 下一节
点击这里下滑/上滑指定面板
反清复明

jQuery Slide 滑动

通过jQuery库可使HTML元素滑动显示或消失,相关方法如下:


slideDown() 方法

通过jQuery库中的slideDown()方法可以使隐藏状态的元素以向下滑动的方式显现。


slideDown()语法:

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

其中speed和callback都是非必选参数。speed参数指下滑显示的速度,可以取值“slow”、“fast”、具体的毫秒数。callback参数指代回调函数,即当slideDown方法执行成功后再进行回调运行的函数。举例如下:

$("button").click(function(){
    $("#panel").slideDown();
});

运行一下


slideUp() 方法

通过jQuery库中的slideUp()方法可以使指定可视元素以向上滑动的方式消失。


slideUp()语法:

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

其中speed和callback都是非必选参数。speed参数指上滑消失的速度,可以取值“slow”、“fast”、具体的毫秒数。callback参数指代回调函数,即当slideUp方法执行成功后再进行回调运行的函数。举例如下:

$("button").click(function(){
    $("#panel").slideUp();
});

运行一下


slideToggle() 方法

通过jQuery库中的slideToggle()方法可以上下滑动的方式切换隐藏与显示状态失。


slideToggle()语法:

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

其中speed和callback都是非必选参数。speed参数指上下滑动的速度,可以取值“slow”、“fast”、具体的毫秒数。callback参数指代回调函数,即当slideToggle方法执行成功后再进行回调运行的函数。举例如下:

$("button").click(function(){
    $("#panel").slideToggle();
});

运行一下


jQuery Slide

上一节 下一节