jQuery UI API - 顏色動畫（Color Animation）

jQuery UI 特效核心添加了使用 rgb()、rgba()、十六進制值或者顏色名比如"aqua" 來動態改變 color 屬性的功能。只需要包含 jQuery UI 特效核心檔，.animate() 就會支持顏色。

支持下列屬性：

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • columnRuleColor
  • outlineColor
  • textDecorationColor
  • textEmphasisColor

對顏色動畫的支持來自 jQuery Color 插件。Color 插件提供了一些用於顏色的函數。如需查看完整文檔，請訪問 jQuery Color 文檔。

Class 動畫（Class Animations）

雖然可以直接對 color 屬性進行動畫化，但是通常採用另一種更好的方法，即在一個 class 中包含樣式。jQuery UI 提供了一些動態添加或去除 CSS 類的方法，分別是 .addClass()、.removeClass()、 .toggleClass() 和 .switchClass()。這些方法將自動確定哪些屬性需要改變，哪些需要應用適當的動畫。

實例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>顏色動畫（Color Animation）演示</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #elem {
    color: #006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<div id="elem">顏色動畫</div>
<button id="toggle">改變顏色</button>

<script>
$( "#toggle" ).click(function() {
  $( "#elem" ).animate({
    color: "green",
    backgroundColor: "rgb( 20, 20, 20 )"
  });
});
</script>

</body>
</html>