JqueryUI-カラーアニメーション

jQueryUIはいくつかのコアjQueryメソッドを拡張して、要素のさまざまな遷移をアニメーション化できるようにします。それらの1つは_animate_メソッドです。 jQueryUIはjQuery _animate_メソッドを拡張して、色のアニメーション化のサポートを追加します。要素の色を定義するいくつかのCSSプロパティの1つをアニメーション化できます。以下は、_animate_メソッドがサポートするCSSプロパティです。

backgroundColor -要素の背景色を設定します。
borderTopColor -要素の境界線の上側の色を設定します。
borderBottomColor -要素の境界線の下側の色を設定します。
borderLeftColor -要素の境界の左側の色を設定します。
borderRightColor -要素の境界の右側の色を設定します。
color -要素のテキストの色を設定します。
outlineColor -アウトラインの色を設定します。要素を強調するために使用されます。

構文

以下はjQueryUI _animate_メソッドの構文です-

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

このメソッドには、、（コンマ）で区切った任意の数のプロパティを設定できます。

例

次の例は、_addClass（）_メソッドの使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>

      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>

      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>

   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

上記のコードをHTMLファイル animateexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ボタンをクリックして、ボックスのアニメーションがどのように変化するかを確認します。

Jqueryui-coloranimation

JqueryUI-カラーアニメーション

構文

例