页面元素隐藏和显示

一、jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){

  $("p").hide();

});

$("#show").click(function(){

  $("p").show();

});

语法：

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有speed 参数的 hide() 方法：

实例

$("button").click(function(){

  $("p").hide(1000);

});

jQuery.toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){

  $("p").toggle();

});

语法：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是 toggle() 方法完成后所执行的函数名称。

二、css元素隐藏display:none和visibility:hidden

1、$（“#id”）.css(“display”,“none”)

display属性设置元素的显示方式，可选值为none、block和inline：

none隐藏元素，不保留元素显示时的空间。

block块方式显示元素。

inline以内嵌方式显示元素。

2、$（“#id”）.css(“visibility”,“hidden”)

visibility属性设置是否显示元素，可选值为inherit、hidden和visible：

inherit继承父元素的visibility属性设置。

hidden隐藏元素，但保留其所占空间。

visible显示元素(默认值)。

display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域。

dispaly:block;显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。

visibility:hidden;隐藏该元素，真正的隐藏，但他还占有那块空间。

visibility:visible;让元素显示。