jQueryのUIのAPI - .toggleClass（）

カテゴリ

特殊効果（エフェクト） | エフェクトコア（コアエフェクト） | メソッドオーバーロード（メソッドをオーバーライドします）

使用法

説明：アニメーションのスタイルが変更され、一つ以上のクラスを追加または削除するには、各要素のマッチした要素の集合内のスイッチパラメータのクラスの存在と値に応じて。

戻り値： jQueryの

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

参数	类型	描述	默认值
ClassName	String	为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔。
switch	Boolean	一个布尔值，指定 class 应被添加还是被移除。
duration	Number 或 String	一个字符串或一个数字，指定动画将运行多久。	400
easing	String	一个字符串，指示要使用的 easing 函数。	swing
complete	Function()	一旦动画完成时要调用的函数。

.toggleClass( className [, switch ] [, options ] )

参数	类型	描述
ClassName	String	为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔。
switch	Boolean	一个布尔值，指定 class 应被添加还是被移除。
options	Object	所有的动画设置。所有的属性是可选的。 duration （默认值： `400` ）类型：Number 或 String 描述：一个字符串或一个数字，指定动画将运行多久。 easing （默认值： `swing` ）类型：String 描述：一个字符串，指示要使用的 easing 函数。 complete 类型：Function() 描述：一旦动画完成时要调用的函数。 children （默认值： `false` ）类型：Boolean 描述：指定动画是否被应用到匹配元素的所有后代。此功能应慎重使用，因为判断元素是否是动画的后代的代价是很大的，会根据后代的数量线性增长。 queue （默认值： `true` ）类型：Boolean 或 String 描述：一个布尔值，指示是否将动画放在特效队列中。如果是 false，动画将立即开始。自 jQuery 1.7 起，queue 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。

スタイルの変更のすべての詳細は、JavaScriptを使用せずに、CSSを介して行われることを確保しながら、jQueryのUIのアニメーションクラスは、1の状態からの遷移の別の状態へのスムーズな移行を提供し、ネイティブCSSに似て移行します。構成するすべてのクラスのアニメーション、 .toggleClass() 、アニメーションのカスタム期間を可能にし、イージング機能を、アニメーションも、コールバックを提供して完了です。

すべてのスタイルを追加するためにアニメーション化することができません。例えば、背景画像をアニメーション。映画が終了したときに任意のアニメーションのスタイルが変更されません。

jQueryのからのプラグインの拡張機能は、内蔵.toggleClass（）メソッドを。 jQueryのUIがロードされていない場合、呼び出し.toggleClass()メソッドはjQueryのに存在するため、単純に失敗しない方法を。しかし、それは行動を期待されていません。

例

「ビッグブルー」のスイッチング素子のクラスと一致します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> .toggleClass（）デモ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <スタイル>
  div要素{
    幅：100ピクセル;
    高さ：100pxに。
    背景色：#CCC;
  }
  .bigブルー{
    幅：200pxの;
    高さ：200pxの;
    背景色：＃00F;
  }
  </スタイル>
  <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
 
<DIV> </ DIV>
 
<スクリプト>
$（ "本部"）.click（関数（）{
  $（この）.toggleClass（「ビッグブルー」、1000年、「easeOutSine "）;
}）;
</スクリプト>
 
</ BODY>
</ HTML>

前：jQueryのUIのAPI - .toggle（）

次へ：jQueryのUIのAPI -移動効果（移動効果）

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル

jQuery UI 例

jQueryのUIのAPI - .toggleClass（）

カテゴリ

使用法

例