jQuery顯示隱藏方法
-
hide（）方法
元素隱藏，隱藏的前提必須是元素display:block；
-
show（）方法
元素顯示，顯示的前提必須是元素display:none;
-
toggle（）方法
在元素隱藏和顯示之間進行切換
這三種方法設置的效果，在過程中還可以出現過渡動畫
• 如果不傳參數，直接顯示和隱藏就沒有過渡動畫
• 如果傳參數：
•單詞格式：”slow“ , "normal" , "fast"
• 數字格式：單位是毫秒，在規定時間內會出現顯示或 隱藏的動畫。
<body>
<div class="box">
<img src="../../imgs/1.jpg" alt=""><br>
</div>
<input type="button" value="只會隱藏" id="btn1">
<input type="button" value="只會顯示" id="btn2">
<input type="button" value="可以隱藏、顯示切換" id="btn3">
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $img = $("img");
var $btn1 = $("#btn1")
var $btn2 = $("#btn2");
var $btn3 = $("#btn3");
//添加點擊事件，實現圖片隱藏或顯示
$btn1.click(function(){
// $img.hide("slow");
$img.hide(1000);
})
$btn2.click(function(){
$img.show("normal");
})
$btn3.click(function(){
$img.toggle("fast");
})
</script>
過渡時間內，伴隨着寬度和高度以及透明度的變化
滑動顯示隱藏
- slideDown（）：滑動顯示（方向不一定）
- slideUp（）：滑動隱藏
- slideToggle（）：滑動切換
讓元素在display屬性的block 和 none 之間進行切換
- 如果不傳參數，默認的過渡時間是400毫秒。
- 如果傳參數：
• 單詞格式："slow","normal", "fast"
• 數字格式的時間，單位是毫秒，在規定時間之內會出現顯示或隱藏的動畫
$btn1.click(function () {
$img.slideUp(2000);
})
$btn2.click(function () {
$img.slideDown("normal");
})
$btn3.click(function () {
$img.slideToggle();
})
- 注意的是：
- 如果滑動的元素沒有設置寬高，就沒有滑動效果；(有高度沒寬度，效果如同show、hide，透明度不會發送變化；有寬度沒高度，高度方向的滑動效果)
- 如果元素設置了高度和寬度，會進行上下垂直方向的滑動；
- 動畫的效果：高度屬性在0到設置值之間的變化，沒有透明度動畫；
- 如果元素設置了定位，偏移量方向如果是bottom參與了，滑動方向會發生變化
img {
position: absolute;/*fixed 固定定位同*/
bottom: 10px;
display: block;
width: 400px;
height: 220px;
}
淡入淡出
-
fadeln（）方法：淡入，透明度逐漸增大最終顯示
-
fadeOut（）方法：淡出，透明度逐漸降低最終隱藏
-
fadeToggle（）方法：切換效果
-
fadeTo（）方法：淡入或淡出到指定的某個透明度
-
動畫效果，執行的是透明度動畫，也是在display屬性的block和none之間切換
• 如果不傳參數：默認的過渡時間為 400 毫秒。
• 如果傳遞參數：
• 單詞格式："slow","normal", "fast"
• 數字格式的時間，單位是毫秒，在規定時間之內會出現顯示或隱藏的動畫。
var $img = $("img");
var $btn1 = $("#btn1")
var $btn2 = $("#btn2");
var $btn3 = $("#btn3");
var $btn4 = $("#btn4")
//添加點擊事件，實現圖片隱藏或顯示
$btn1.click(function () {
$img.fadeOut()
})
$btn2.click(function () {
$img.fadeIn()
})
$btn3.click(function () {
$img.fadeToggle()
})
$btn4.click(function(){
//需要傳兩個參數，時間和透明度
$img.fadeTo(1000,0.5)
})