jQuery UI API - .toggleClass() · W3School jQuery UI 教程

# jQuery UI API - .toggleClass() ## 所屬類別 [特效（Effects）](ref-effects.html) | [特效核心（Effects Core）](ref-effects-core.html) | [方法重載（Method Overrides）](ref-overrides.html) ## 用法 **描述：**當動畫樣式改變時，根據 Class 是否存在以及 switch 參數的值，為匹配的元素集合內的每個元素添加或移除一個或多個 Class。 **返回：**[jQuery](//api.jquery.com/Types/#jQuery) ``` .toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] ) ``` | 參數 | 類型 | 描述 | 默認值 | | --- | --- | --- | --- | | ClassName | String | 為匹配的元素集合中的每個元素要切換的一個或多個 class 名稱，多個 class 名稱用空格分隔。 | | switch | Boolean | 一個布爾值，指定 class 應被添加還是被移除。 | | duration | Number 或 String | 一個字符串或一個數字，指定動畫將運行多久。 | 400 | | easing | String | 一個字符串，指示要使用的 [easing](api-easings.html) 函數。 | swing | | complete | Function() | 一旦動畫完成時要調用的函數。 | ``` .toggleClass( className [, switch ] [, options ] ) ``` | 參數 | 類型 | 描述 | | --- | --- | --- | | ClassName | String | 為匹配的元素集合中的每個元素要切換的一個或多個 class 名稱，多個 class 名稱用空格分隔。 | | switch | Boolean | 一個布爾值，指定 class 應被添加還是被移除。 | | options | Object | 所有的動畫設置。所有的屬性是可選的。 * **duration**（默認值：`400`）類型：Number 或 String 描述：一個字符串或一個數字，指定動畫將運行多久。 * **easing**（默認值：`swing`）類型：String 描述：一個字符串，指示要使用的 [easing](api-easings.html) 函數。 * **complete** 類型：Function() 描述：一旦動畫完成時要調用的函數。 * **children**（默認值：`false`）類型：Boolean 描述：指定動畫是否被應用到匹配元素的所有后代。此功能應慎重使用，因為判斷元素是否是動畫的后代的代價是很大的，會根據后代的數量線性增長。 * **queue**（默認值：`true`）類型：Boolean 或 String 描述：一個布爾值，指示是否將動畫放在特效隊列中。如果是 false，動畫將立即開始。**自 jQuery 1.7 起**，queue 選項也接受一個字符串，在這種情況下，動畫添加到由字符串表示的隊列中。與原生的 CSS 過渡相似，jQuery UI 的 class 動畫提供了一個平穩的從一個狀態轉換到另一個狀態的過渡，同時確保所有樣式變化的細節是通過 CSS 來完成的，而不需要使用 JavaScript。所有的 class 動畫方法，包括 `.toggleClass()`，允許自定義動畫持續時間和 [easing](api-easings.html) 函數，在動畫完成時也提供了一個回調。并非所有的樣式都可以進行動畫添加。例如，對背景圖像進行動畫化。任何不能動畫化的樣式都將在動畫結束時改變。該插件擴展自 jQuery 內置的 [.toggleClass()](/jquery/html-toggleClass.html) 方法。如果 jQuery UI 未加載，調用 `.toggleClass()` 方法不會直接失敗，因為該方法在 jQuery 中存在。但是不會發生預期的行為。 ## 實例為匹配的元素切換 class "big-blue"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>.toggleClass() 演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> div { width: 100px; height: 100px; background-color: #ccc; } .big-blue { width: 200px; height: 200px; background-color: #00f; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div></div> <script> $( "div" ).click(function() { $( this ).toggleClass( "big-blue", 1000, "easeOutSine" ); }); </script> </body> </html> ```