jQuery的几种显示隐藏方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery的几种显示隐藏方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery顯示隱藏方法
-
hide（）方法
元素隱藏，隱藏的前提必須是元素display:block；
-
show（）方法
元素顯示，顯示的前提必須是元素display:none;
-
toggle（）方法
在元素隱藏和顯示之間進(jìn)行切換
這三種方法設(shè)置的效果，在過程中還可以出現(xiàn)過渡動(dòng)畫
? ? 如果不傳參數(shù)，直接顯示和隱藏就沒有過渡動(dòng)畫
? ? 如果傳參數(shù)：
? ?單詞格式：”slow“ , “normal” , “fast”
? ? 數(shù)字格式：單位是毫秒，在規(guī)定時(shí)間內(nèi)會(huì)出現(xiàn)顯示或 隱藏的動(dòng)畫。
<body><div class="box"><img src="../../imgs/1.jpg" alt=""><br></div><input type="button" value="只會(huì)隱藏" id="btn1"> <input type="button" value="只會(huì)顯示" 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");//添加點(diǎn)擊事件，實(shí)現(xiàn)圖片隱藏或顯示$btn1.click(function(){// $img.hide("slow");$img.hide(1000);})$btn2.click(function(){$img.show("normal");})$btn3.click(function(){$img.toggle("fast");}) </script>過渡時(shí)間內(nèi)，伴隨著寬度和高度以及透明度的變化
滑動(dòng)顯示隱藏
- slideDown（）：滑動(dòng)顯示（方向不一定）
- slideUp（）：滑動(dòng)隱藏
- slideToggle（）：滑動(dòng)切換
讓元素在display屬性的block 和 none 之間進(jìn)行切換
- 如果不傳參數(shù)，默認(rèn)的過渡時(shí)間是400毫秒。
- 如果傳參數(shù)：
? ? 單詞格式：“slow”,“normal”, “fast”
? ? 數(shù)字格式的時(shí)間，單位是毫秒，在規(guī)定時(shí)間之內(nèi)會(huì)出現(xiàn)顯示或隱藏的動(dòng)畫
- 注意的是：
- 如果滑動(dòng)的元素沒有設(shè)置寬高，就沒有滑動(dòng)效果；(有高度沒寬度，效果如同show、hide，透明度不會(huì)發(fā)送變化；有寬度沒高度，高度方向的滑動(dòng)效果)
- 如果元素設(shè)置了高度和寬度，會(huì)進(jìn)行上下垂直方向的滑動(dòng)；
- 動(dòng)畫的效果：高度屬性在0到設(shè)置值之間的變化，沒有透明度動(dòng)畫；
- 如果元素設(shè)置了定位，偏移量方向如果是bottom參與了，滑動(dòng)方向會(huì)發(fā)生變化
淡入淡出
-
fadeln（）方法：淡入，透明度逐漸增大最終顯示
-
fadeOut（）方法：淡出，透明度逐漸降低最終隱藏
-
fadeToggle（）方法：切換效果
-
fadeTo（）方法：淡入或淡出到指定的某個(gè)透明度
-
動(dòng)畫效果，執(zhí)行的是透明度動(dòng)畫，也是在display屬性的block和none之間切換
? 如果不傳參數(shù)：默認(rèn)的過渡時(shí)間為 400 毫秒。
? 如果傳遞參數(shù)：
? 單詞格式：“slow”,“normal”, “fast”
? 數(shù)字格式的時(shí)間，單位是毫秒，在規(guī)定時(shí)間之內(nèi)會(huì)出現(xiàn)顯示或隱藏的動(dòng)畫。
總結(jié)
以上是生活随笔為你收集整理的jQuery的几种显示隐藏方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java - 说一下表达式语言（EL）的
- 下一篇： IM即时通讯项目讲解(一)--实现类似q