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.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 的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以玩弄結果：

單擊切換類按鈕以檢視類對框的影響。

列印頁面