jQuery Hide/Show/Toggle

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

• 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次“反清复明”。