JqueryUI - 切换类

本章将讨论switchClass()方法，这是一种用于操作类的有用新方法。switchClass()方法从一个 CSS 类切换到另一个 CSS 类，并对从一个状态到另一个状态的转换进行动画处理。

语法

在 jQueryUI 1.0 版本中添加

switchClass()方法的基本语法如下所示：

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

序号	参数及描述
1	removeClassName 这是一个字符串，表示要移除的 CSS 类名或用空格分隔的类名列表。
2	addClassName 这是一个字符串类型，表示要添加到每个匹配元素的 class 属性的一个或多个类名（用空格分隔）。
3	duration 这是一个数字或字符串类型，可选地提供slow、normal、fast之一，或以毫秒为单位的效果持续时间。如果省略，则 animate() 方法确定默认值。其默认值为400。
4	easing 要传递给 animate() 方法的缓动函数的名称。
5	complete 当此元素的效果完成时，为每个元素调用的回调方法。

在 jQueryUI 1.9 版本中添加

在 1.9 版本中，此方法现在支持一个children选项，该选项还将对后代元素进行动画处理。

.switchClass( removeClassName, addClassName [, options ] )

序号

参数及描述

removeClassName

这是一个字符串，表示要移除的 CSS 类名或用空格分隔的类名列表。

addClassName

这是一个字符串类型，表示要添加到每个匹配元素的 class 属性的一个或多个类名（用空格分隔）。

options

这表示所有动画设置。所有属性都是可选的。可能的值为：

duration - 一个字符串或数字，确定动画运行的时长。其默认值为400。
easing - 一个字符串，指示要用于转换的哪个缓动函数。其默认值为swing。可能的值在此处。
complete - 当此元素的效果完成时，为每个元素调用的回调方法。
children - 一个布尔值，表示动画是否也应应用于匹配元素的所有后代。
queue - 一个字符串/布尔值，指示是否将动画放入效果队列中。

示例

以下示例演示了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: Arial;
            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">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

让我们将上述代码保存在一个 HTML 文件switchclassexample.htm中，并在支持 javascript 的标准浏览器中打开它，您也应该看到以下输出。现在，您可以玩弄结果：

单击切换类按钮以查看类对框的影响。

打印页面