📌  相关文章
📜  jQuery UI | switchClass() 方法(1)

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

jQuery UI | switchClass() 方法

简介

switchClass()方法是 jQuery UI 中的一种元素样式切换方法。它可以在两个 CSS 类之间来回切换，实现动态改变元素样式的目的。

语法
$(selector).switchClass(class1, class2 [, duration] [, easing] [, complete]);
  • selector：必需，选择器，用于选定要切换样式的元素；
  • class1：必需，一个字符串，表示要从该 CSS 类切换；
  • class2：必需，一个字符串，表示要切换到该 CSS 类；
  • duration：可选，一个字符串或数值，表示动画的持续时间；
  • easing：可选，一个字符串，指定动画的缓动效果；
  • complete：可选，一个函数，在动画完成后执行。
示例

切换元素样式

<!DOCTYPE html>
<html>
<head>
    <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>
        .class1 {
            background-color: red;
            height: 50px;
            width: 50px;
        }
        .class2 {
            background-color: blue;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(function() {
            $("#switch-btn").click(function() {
                $("#box").switchClass("class1", "class2", 1000);
            });
        });
    </script>
</head>
<body>
    <button id="switch-btn">切换</button>
    <div id="box" class="class1"></div>
</body>
</html>

上述示例中，单击按钮后，#box 元素将从 class1 切换到 class2，并使用 1 秒的动画时长。

参考链接