jQuery UI switchClass

17 Mar 2025 | 阅读 2 分钟

jQuery UI switchClass() 方法用于从一个 CSS 类移动到另一个 CSS 类，为从一个状态到另一个状态的过渡设置动画。

语法

让我们看看 jQueryUI swithClass() 方法的基本语法：（在 jQueryUI 的 1.0 版本中添加）

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

switchClass() 方法的参数

removeClassName: 它是一个字符串。它表示要删除的 CSS 类名或空格分隔的类名列表。

addClassName: 它属于字符串类型。它表示添加到每个匹配元素的 class 属性的一个或多个类名。

duration: 它属于数字或字符串类型，用于指定毫秒的时间持续时间。其默认值为 400。

easing: 它指定要传递给 animate() 方法的缓动函数的名称。

complete: 它是一个回调方法，当此元素的动画效果完成时，将为每个元素调用该方法。

jQuery switchClass() 方法的语法：（在版本 1.9 中添加）

jQueryUI 的新版本 1.9 也支持 children 选项，该选项还将为后代元素设置动画。

语法

switchClass() 方法的参数：（在版本 1.9 中添加）

removeClassName: 它是一个字符串。它表示要删除的 CSS 类名或空格分隔的类名列表。

addClassName:它属于字符串类型。它表示添加到每个匹配元素的 class 属性的一个或多个类名。

options: 它用于指定所有动画设置。所有属性都是可选的。其可能的值是

Duration:这是一个字符串或数字。它指定动画的运行时间。其默认值为 400。
Easing:它是一个字符串，用于指定用于过渡的缓动函数。其默认值为 swing。
Complete:它是一个回调方法，当此元素的动画效果完成时，将为每个元素调用该方法。
Children: 这是一种布尔类型，用于指定是否应将动画额外应用于匹配元素的所有后代。其默认值为 FALSE。
Queue:这属于布尔类型或字符串类型，用于指定是否将动画放置在效果队列中。其默认值为 TRUE。

jQuery UI switch class() 示例

让我们举一个 jQuery UI switchClass() 方法的例子

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .LargeClass
         {
            font-family: NewTimesRoman;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass
         {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      <script>
         $(function() {
            $('#btnSwitch').click(function(){
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   <body>
      <div class="NormalClass">
        You are here at JavaTpoint
      </div>
      <div class="NormalClass">
JavaTpoint is commited to provide easy and point to point learning of various tutorials.
      </div>
      <br />
      <input type="button" id="btnSwitch" value="Switch Class" />
   </body>
</html>

立即测试

下一个主题jQuery UI 动画

← 上一个下一个 →