jQuery中顯示元素的show方法
css中有display:none屬性,同時也有display:block,所以jQuery同樣提供了與hide相反的show方法
方法的使用幾乎與hide是一致的,hide是讓元素顯示到隱藏,show則是相反,讓元素從隱藏到顯示
看一段代碼:使用上一致,結(jié)果相反
$('elem').hide(3000).show(3000)
讓元素執(zhí)行3秒的隱藏動畫,然后執(zhí)行3秒的顯示動畫。
show與hide方法是非常常用的,但是一般很少會基于這2個屬性執(zhí)行動畫,大多情況下還是直接操作元素的顯示與隱藏為主
注意事項:
- show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設(shè)置
- 如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式
- 如果讓show與hide成為一個動畫,那么默認執(zhí)行動畫會改變元素的高度,高度,透明度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
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-show</h2>
<div class="left">
<div id="a1">hide-show</div>
<button>直接hide-show動畫</button>
<script type="text/javascript">
//點擊button
//執(zhí)行3秒隱藏
//執(zhí)行3秒顯示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
</script>
</body>
</html>
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求