jQueryのUIの例 - カラーアニメーション（カラーアニメーション）
カラーアニメーションを達成するために.animate（）を使用します。
カラーアニメーション（カラーアニメーション）の詳細詳細については、APIドキュメントを参照してくださいカラーアニメーション（カラーアニメーションを） 。
jQueryのUIはjQueryの色のプラグインをバンドルし、jQueryの色のプラグインは、色のアニメーションや他の多くの色関連のユーティリティ機能を提供します。
アニメ（アニメーション）デモ
効果をプレビューするには、ボタンをクリックしてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIエフェクト - アニメーション（アニメーション）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.toggler {幅：500pxなど;高さ：200pxの;位置：相対;}
#button {パディング：.5em 1EM;テキスト装飾：なし;}
#effect {幅：240ピクセル;高さ：135px;パディング：0.4em;位置：相対;背景：#FFF;}
#effect H3 {マージン：0;パディング：0.4em;テキスト整列：センター;}
</スタイル>
<スクリプト>
$（関数（）{
真のvar状態=;
$（ "#button"）.click（関数（）{
{（状態）の場合
$（ "#effect」）.animate（{
backgroundColor： "＃のAA0000」、
色：「#FFF」、
幅：500
}、1000）;
}エルス{
$（ "#effect」）.animate（{
backgroundColor：「#FFF」、
色：「＃000」、
幅：240
}、1000）;
}
状態=状態!;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "トグラー">
<DIV ID = "効果"クラス= "UIウィジェットコンテンツUI-コーナー-すべて">
<H3クラス= "UIウィジェットヘッダUI-コーナー-すべて">アニメ（アニメーション）</ H3>
<P>
Etiamリベロnequeは、Loremの。セッドpede。NULLAのLoremののmetus、adipiscing UT、sedのluctus、hendrerit履歴書、マイルでゼンパー、eleifend NECをluctus。
</ P>
</ DIV>
</ DIV>
<a href="#" id="button" class="ui-state-default ui-corner-all">切り替え効果</a>に
</ BODY>
</ HTML>