JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果

發(fā)布時(shí)間：2021-09-14 13:36:05 來(lái)源：億速云閱讀：153 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章主要為大家展示了“JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果”這篇文章吧。

隱藏和顯示

語(yǔ)法

$(selector).fadeIn([speed,callback]);
$(selector).fadeOut([speed,callback]);
$(selector).fadeToggle([speed,callback]);

參數(shù)說(shuō)明：

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>文檔處理</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }
   
   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnHide").click(function() {
     //$("div").hide();
     //$("div").hide(2000);
     $("div").hide(2000, function() {
      alert("隱藏完成！");
     });
    });
    $("#btnShow").click(function() {
     //$("div").show();
     //$("div").show(2000);
     $("div").show(2000, function() {
      alert("顯示完成！");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").toggle();
     //$("p").toggle(2000);
     $("p").toggle(2000, function() {
      alert("切換完成！");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnHide">隱藏-div</button>
  <button id="btnShow">顯示-div</button>
  <button id="btnToggle">切換顯示和隱藏-p</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p >p1</p>
  <p>p2</p>
 </body>

</html>

效果展示

隱藏效果展示

JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果

顯示效果展示

JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果

切換顯示和隱藏

從P1切換成了P2

JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果

淡入和淡出

語(yǔ)法

$(selector).fadeIn([speed,callback]);
$(selector).fadeOut([speed,callback]);
$(selector).fadeToggle([speed,callback]);

參數(shù)說(shuō)明：

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>效果</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }
   
   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnIn").click(function() {
     //$("div").fadeIn();
     //$("div").fadeIn(2000);
     $("div").fadeIn(2000, function() {
      alert("淡入完成！");
     });
    });
    $("#btnOut").click(function() {
     //$("div").fadeOut();
     //$("div").fadeOut(2000);
     $("div").fadeOut(2000, function() {
      alert("淡出完成！");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").fadeToggle();
     //$("p").fadeToggle(2000);
     $("p").fadeToggle(2000, function() {
      alert("切換完成！");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnIn">淡入-div</button>
  <button id="btnOut">淡出-div</button>
  <button id="btnToggle">切換淡入淡出-P</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p >p1</p>
  <p>p2</p>
 </body>

</html>

以上是“JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

JQuery怎樣實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果

隱藏和顯示

淡入和淡出

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽