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>