第一種:
$(selector).show(); //立即顯示指定標籤
$(selector).hide();//立即隱藏指定標籤
第二種:
$(selector).fadeIn(ms);//在指定毫秒內漸現
$(selector).fadeOut(ms);//在指定毫秒內漸隱
第三種:
$(selector).toggle();//改變標籤的可見狀態,如果隱藏則顯示,反之則隱藏
另外:
$(selector).is(":hidden");//可以判斷指定元素是否隱藏 返回值爲布爾值
例子:
一個完整的demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>demo-show/hide</title>
</head>
<style>
#out-part{
margin: 0 auto;
width: 400px;
background-color: bisque;
overflow: hidden;
}
#in-part{
margin: 100px auto;
width:200px;
height: 200px;
background-color: purple;
}
button{
display: block;
width: 100px;
float: left;
margin-left: 10px;
}
</style>
<body>
<!-- 測試部分 -->
<div id="out-part">
<div id="in-part"></div>
</div>
<br>
<!-- 按鈕部分 -->
<button id="show">顯示</button>
<button id="hide">隱藏</button>
<button id="fadeIn">漸現</button>
<button id="fadeOut">漸隱</button>
<button id="show-hide">顯示/隱藏</button>
</body>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$('#show').on('click',function () {//顯示
$('#out-part').show();
})
$('#hide').on('click',function () {//隱藏
$('#out-part').hide();
})
$('#fadeIn').on('click',function () {//漸現
$('#out-part').fadeIn(1000);
})
$('#fadeOut').on('click',function () {//漸隱
$('#out-part').fadeOut(500);
})
$('#show-hide').on('click',function () {//顯示/隱藏
//第一種
// $('#out-part').toggle();
//第二種
if($('#out-part').is(":hidden")){//判斷是否隱藏
$('#out-part').fadeIn(1000);//漸現
}else{
$('#out-part').hide();
}
})
</script>
</html>