JqueryUI教程

JqueryUI - Switch类

本章将讨论 switchClass()方法，它是一个有用的新操作类. switchClass()方法从一个CSS移动到另一个CSS类，动画从一个状态到另一个状态的转换.

语法

在jQueryUI 1.0版中添加

switchClass()方法的基本语法如下 :

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

Sr.No.	参数&描述
1	removeClassName 这是一个String，表示要删除的CSS类名或以空格分隔的类名列表.
2	addClassName 这是String类型，表示要添加的一个或多个类名(空格分隔)到每个匹配元素的class属性.
3	duration 这是Number或String类型，可选择提供一个慢，正常，快速，或效果的持续时间(以毫秒为单位).如果省略，则animate()方法确定默认值.它的默认值是 400 .
4	easing 缓动函数的名称为被传递给animate()方法.
5	complete 这是一个为每个元素调用的回调方法该元素的效果已完成.

在jQueryUI 1.9版中添加

对于版本1.9，此方法现在支持 children 选项，该选项还将为后代元素设置动画.

.switchClass( removeClassName, addClassName [, options ] )

Sr.No.

参数&描述

removeClassName

这是一个String，表示要删除的CSS类名或以空格分隔的类名列表.

addClassName

这是String类型，表示要添加的一个或多个类名(空格分隔)到每个匹配元素的class属性.

选项

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

duration : 确定动画运行时间的字符串或数字.其默认值为 400 .
easing : 一个字符串，指示要用于转换的缓动函数.它的默认值是 swing .
complete : 当这个元素的效果完成时，这是为每个元素调用的回调方法.
children : 这是一个布尔值，表示动画是否应该另外应用于匹配元素的所有后代.
queue : 这是String/Boolean类型，指示是否将动画放在效果队列中.

示例

以下示例演示了如何使用 switchClass()方法.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果 :

点击 Switch Class 按钮，查看课程中课程的效果.