jquery 顯示隐藏div方法show(),hide(),toggle(),slideDown()總結

www.111cn.net 編輯:smoke 來源:轉載在jquery中顯示隐藏div方法方法有很多種，如比較簡單的函數show(),hide(),toggle(),slideDown()然後還有css設定div的style屬性都可操作，下面我來介紹。

show()方法

顯示出隐藏的 <p> 元素。

代碼如下

複制代碼

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

$("p").show();

});

toggle()方法

toggle() 方法切換元素的可見狀态。

如果被選元素可見，則隐藏這些元素，如果被選元素隐藏，則顯示這些元素。

代碼如下

複制代碼

<html>

<head>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

</body>

</html>

slideDown()方法

以滑動方式顯示隐藏的 <p> 元素：

代碼如下

複制代碼

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

$("p").slideDown();

});

hide() 方法

隐藏可見的 <p> 元素：

代碼如下

複制代碼

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

$("p").hide();

});

這個函數經常與show一起使用

css()方法

css() 方法設定或傳回被選元素的一個或多個樣式屬性。

傳回 CSS 屬性

如需傳回指定的 CSS 屬性的值，請使用如下文法：

代碼如下

複制代碼

css("propertyname");

$("p").css("display","none");

看一個執行個體

代碼如下

複制代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready( function(){});

function hiden(){

$("#divObj").hide();//hide()函數,實作隐藏,括号裡還可以帶一個時間參數(毫秒)例如hide(2000)以2000毫秒的速度隐藏,還可以帶slow,fast

}

function slideToggle(){

$("#divObj").slideToggle(2000);//窗簾效果的切換,點一下收,點一下開,參數可以無,參數說明同上

}

function show(){

$("#divObj").show();//顯示,參數說明同上

}

function toggle(){

$("#divObj").toggle(2000);//顯示隐藏切換,參數可以無,參數說明同上

}

function slide(){

$("#divObj").slideDown();//窗簾效果展開

}

</script>

</head>

<body>

<h3>div裡内容的顯示隐藏特效</h3>

1.測試例子<br/>

2.測試例子<br/>

3.測試例子<br/>

4.測試例子<br/>

5.測試例子<br/>

6.測試例子<br/>

7.測試例子<br/>

8.測試例子<br/>

9.測試例子<br/>

0.測試例子<br/>

</div>

</body>

</html>

jquery 顯示隐藏div方法show(),hide(),toggle(),slideDown()總結jquery 顯示隐藏div方法show(),hide(),toggle(),slideDown()總結

jquery 顯示隐藏div方法show(),hide(),toggle(),slideDown()總結