jQuery UI |切换()方法(1)

📌 相关文章

📜 jQuery UI |切换()方法(1)

📅 最后修改于: 2023-12-03 15:32:10.632000 🧑 作者: Mango

jQuery UI | 切换()方法

概述

切换(Toggle)方法是jQuery UI库中的一个方法，用于对指定元素进行显示和隐藏的切换操作。它可以改变元素的可见性，并允许通过动画效果平滑地转换两个状态之间。

语法

$(selector).toggle([duration,] [easing,] [complete])

selector: 必需，jQuery选择器，用于选择要切换的元素。
duration: 可选，表示完成切换效果的时间。默认值为400毫秒。
easing: 可选，表示切换动画效果使用的缓动函数。
complete: 可选，表示切换完成后需要执行的回调函数。

示例

简单示例

以下示例演示了如何使用toggle()方法来切换一个div元素的可见性。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Toggle Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #toggle-div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
  <script>
    $(document).ready(function() {
      $("#toggle-button").click(function() {
        $("#toggle-div").toggle();
      });
    });
  </script>
</head>

<body>
  <button id="toggle-button">Toggle Div</button>
  <br><br>
  <div id="toggle-div"></div>
</body>

</html>

带动画效果的示例

以下示例演示了如何使用toggle()方法来切换一个div元素的可见性，并添加动画效果。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Toggle Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #toggle-div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
  <script>
    $(document).ready(function() {
      $("#toggle-button").click(function() {
        $("#toggle-div").toggle(1000);
      });
    });
  </script>
</head>

<body>
  <button id="toggle-button">Toggle Div with Animation</button>
  <br><br>
  <div id="toggle-div"></div>
</body>

</html>

结论

toggle()方法是一个简单易用的方法，可以轻松地切换元素的可见性，并支持动画效果和回调函数。它是开发者在开发过程中用得比较频繁的一个方法。