jQuery的幾種顯示隱藏方法

時間 2021-07-25

標籤 javascript css java jquery ide 動畫 code orm 事件圖片欄目 JQuery 简体版

原文原文鏈接

jQuery顯示隱藏方法

hide（）方法javascript

元素隱藏，隱藏的前提必須是元素display:block；css
show（）方法java

元素顯示，顯示的前提必須是元素display:none;jquery
toggle（）方法ide

在元素隱藏和顯示之間進行切換動畫

這三種方法設置的效果，在過程當中還能夠出現過渡動畫

• 若是不傳參數，直接顯示和隱藏就沒有過渡動畫code

• 若是傳參數：orm

•單詞格式：」slow「 , "normal" , "fast"事件

• 數字格式：單位是毫秒，在規定時間內會出現顯示或隱藏的動畫。圖片

<body>
 <div class="box">
    <img src="../../imgs/1.jpg" alt=""><br>
 </div>
   
  <input type="button" value="只會隱藏" id="btn1">&nbsp;&nbsp;
  <input type="button" value="只會顯示" id="btn2">&nbsp;&nbsp;
  <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)
})