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

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

支持下列屬性：

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
columnRuleColor
outlineColor
textDecorationColor
textEmphasisColor

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

Class 動畫（Class Animations）

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

實例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>顏色動畫（Color Animation）演示</title>
  <link rel="stylesheet" >
  <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>

其他擴展

上一篇：jQuery UI API - 剪輯特效（Clip Effect）下一篇：jQuery UI API - 降落特效（Drop Effect）