jQuery中slidedown與slideup方法用法示例

小云
106
2023-08-15 12:14:49

下面是使用 jQuery 中的 slideDown() 和 slideUp() 方法的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: yellow;
      display: none; /* 初始狀態(tài)設(shè)置為隱藏 */
    }
  </style>
</head>
<body>
  <button id="show">顯示</button>
  <button id="hide">隱藏</button>
  <div id="box"></div>
  <script>
    $(document).ready(function() {
      // 顯示 box 元素
      $("#show").click(function() {
        $("#box").slideDown();
      });
      // 隱藏 box 元素
      $("#hide").click(function() {
        $("#box").slideUp();
      });
    });
  </script>
</body>
</html>

在上面的示例中，我們定義了一個(gè)大小為 200x200 像素的黃色方塊，并將其初始狀態(tài)設(shè)置為隱藏（display: none;）。頁(yè)面上有兩個(gè)按鈕，分別是 "顯示" 和 "隱藏"。當(dāng)點(diǎn)擊 "顯示" 按鈕時(shí)，使用 slideDown() 方法展示方塊；當(dāng)點(diǎn)擊 "隱藏" 按鈕時(shí)，使用 slideUp() 方法隱藏方塊。

通過(guò)使用 slideDown() 和 slideUp() 方法，可以實(shí)現(xiàn)元素的平滑展示和隱藏效果。


0 踩