jQueryのUIのAPI - カラーアニメーション（カラーアニメーション）
jQueryのUIのコアが使用して特殊効果追加するrgb() rgba()など、16進数値またはカラー名"aqua"動的機能の色の属性を変更することを。 あなただけがjQueryのUIエフェクトコアファイル、インクルードする必要があり.animate()カラーをサポートします。
これは、次の属性をサポートしています。
-
backgroundColor -
borderBottomColor -
borderLeftColor -
borderRightColor -
borderTopColor -
color -
columnRuleColor -
outlineColor -
textDecorationColor -
textEmphasisColor
以下からのカラーアニメーションのサポートjQueryの色のプラグイン 。 カラープラグインは、色の多くの機能を提供します。 完全な文書を表示するには、訪問jQueryのカラードキュメントを 。
アニメーションのクラス（クラスアニメーション）
色をアニメーション化することは可能であるが、直接属性が、クラスにスタイルを含む通常より良い代替方法。 jQueryのUIはすなわち、動的にCSSクラスを追加または削除するメソッドを提供し.addClass() .removeClass() .toggleClass()と.switchClass() これらの方法は、自動的にプロパティを変更する必要があり、何が適切なアニメーションを適用する必要があるかを決定します。
例
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>カラーアニメーション（カラーアニメーション）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<スタイル>
#elem {
色：＃006;
背景色：#aaa。
フォントサイズ：25ピクセル;
パディング：1EM。
テキスト整列：センター;
}
</スタイル>
<SCRIPT SRC = "http://code.jquery.com/jquery-1.10.2.js"> </スクリプト>
<SCRIPT SRC = "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIV idは= "elemは">カラーアニメーション</ DIV>
<ボタンID = "トグル">変更の色</ button>の
<スクリプト>
$（ "#toggle"）.click（関数（）{
$（ "#elem」）.animate（{
色：「緑」、
backgroundColor：「RGB（20、20、20）」
}）;
}）;
</スクリプト>
</ BODY>
</ HTML>