jQuery中隱藏元素的hide方法
讓頁面上的元素不可見,一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態(tài)的布局,如果在代碼執(zhí)行的時候,一般是通過js控制元素的style屬性,這里jQuery提供了一個快捷的方法.hide()來達到這個效果
$elem.hide()
提供參數(shù):
.hide( options )
當提供hide方法一個參數(shù)時,.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度,高度,以及不透明度,同時進行動畫操作
快捷參數(shù):
.hide("fast / slow")
這是一個動畫設置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執(zhí)行200/600毫秒的動畫后再隱藏
注意:
jQuery在做hide操作的時候,是會保存本身的元素的原始屬性值,再之后通過對應的方法還原的時候還是初始值。比如一個元素的display屬性值為inline,那么隱藏再顯示時,這個元素將再次顯示inline。一旦透明度 達到0,display樣式屬性將被設置為none,這個元素將不再在頁面中影響布局
任務
右邊代碼區(qū)域,在38行處,填入代碼
點擊按鈕,讓id="a1"的元素直接隱藏
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>hide</h2>
<div class="left">
<h4>測試一</h4>
<div id="a1">hide操作</div>
<button>直接hide</button>
<script type="text/javascript">
//點擊buttom1 直接隱藏
$("button:first").click(function() {
$("#a1").?()
});
</script>
<h4>測試一</h4>
<div id="a2">hide動畫操作</div>
<button>hide帶動畫</button>
<script type="text/javascript">
//點擊buttom2 執(zhí)行動畫隱藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('執(zhí)行3000ms動畫完畢')
}
})
});
</script>
</div>
</body>
</html>
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求