jQuery UI - 顏色動畫

jQuery UI 擴充套件了一些核心 jQuery 方法，以便您可以為元素設定不同的動畫過渡效果。其中之一是 `animate` 方法。jQuery UI 擴充套件了 jQuery 的 `animate` 方法，以新增對顏色動畫的支援。您可以為定義元素顏色的幾種 CSS 屬性之一設定動畫。以下是 `animate` 方法支援的 CSS 屬性。

backgroundColor - 設定元素的背景顏色。
borderTopColor - 設定元素邊框上側的顏色。
borderBottomColor - 設定元素邊框下側的顏色。
borderLeftColor - 設定元素邊框左側的顏色。
borderRightColor - 設定元素邊框右側的顏色。
color - 設定元素的文字顏色。
outlineColor - 設定輪廓的顏色；用於強調元素。

語法

以下是 jQuery UI `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>

讓我們將上述程式碼儲存在一個名為 `animateexample.htm` 的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以修改結果：

單擊按鈕，檢視方框的動畫變化。

列印頁面