# Color Animation
jQuery UI特效內核使用`rgb()`, `rgba()`,16進制值,甚至顏色名稱比如`"aqua"`給顏色增加了動畫新特性。只需要包含 jQuery UI特效內核文件和[`.animate()`](http://api.jquery.com/animate/)就可以獲得對各種顏色的支持。
支持以下屬性:
* `backgroundColor`
* `borderBottomColor`
* `borderLeftColor`
* `borderRightColor`
* `borderTopColor`
* `color`
* `columnRuleColor`
* `outlineColor`
* `textDecorationColor`
* `textEmphasisColor`
對顏色動畫的技術支持來自 [jQuery Color plugin](https://github.com/jquery/jquery-color)。顏色插件提供了多個函數來處理各種顏色。 查看完整文檔,請訪問[jQuery Color documentation](https://github.com/jquery/jquery-color#readme)。
## Class Animations(與動畫關聯的CSS類)
當為單獨的顏色屬性直接呈現動畫效果時,將樣式包含在css類中是一個很好的處理方式。 jQuery UI提供了一系列方法,這些方法可以根據新增的CSS類來呈現動畫,還可以刪除任何CSS類。 這些方法包含[`.addClass()`](addClass.html), [`.removeClass()`](removeClass.html), [`.toggleClass()`](toggleClass.html)和 [`.switchClass()`](switchClass.html)。 這些方法將自動決定哪些屬性需要被改變并且對其應用適當的動畫。
## Example
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Animation Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="elem">color animations</div>
<button id="toggle">animate colors</button>
<script>
$( "#toggle" ).click(function() {
$( "#elem" ).animate({
color: "green",
backgroundColor: "rgb( 20, 20, 20 )"
});
});
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget