肉渣教程

jQuery Hide/Show

上一节 下一节
点击这里隐藏/显示下方面板
反清复明

jQuery Hide/Show/Toggle

本节会涉及如下三种方法:

jQuery Hide(隐藏) / Show(显示)

利用jQuery库,使用hide()方法可以快速隐藏指定元素,使用show()方法可以快速显示指定元素。

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

运行一下


hide/show 语法:

$(selector).hide(speed, callback);
$(selector).show(speed, callback);

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

$("#hide").click(function(){
    $("p#taijian").hide( 1000, function(){ alert("反清复明"); } );
});

$("#show").click(function(){
    $("p#taijian").show( 1000, function(){ alert("反清复明"); } );
});

运行一下


jQuery toggle(切换隐藏和显示状态)

$("button").click(function(){
    $("p").toggle();
});

运行一下


toggle 语法:

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

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

$("button").click(function(){
    $("p").toggle(1000, function(){ alert("反清复明"); });
});

运行一下


上面的这个例子中,toggle结束后,会弹出3次“反清复明”,因为jQuery的该选择器是同时选中了3个p元素,因此是3个p元素总共进行了3次toggle方法,因此,toggle方法结束后,总共弹出了3次“反清复明”。


jQuery Hide/Show

上一节 下一节