| 1 |
<p><a href="http://docs.jquery.com/UI" title="UI">« Back to the jQuery UI Docs</a> |
| 2 |
</p><p>The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties: |
| 3 |
</p> |
| 4 |
<ul><li> <b>backgroundColor</b> |
| 5 |
</li><li> <b>borderBottomColor</b> |
| 6 |
</li><li> <b>borderLeftColor</b> |
| 7 |
</li><li> <b>borderRightColor</b> |
| 8 |
</li><li> <b>borderTopColor</b> |
| 9 |
</li><li> <b>color</b> |
| 10 |
</li><li> <b>outlineColor</b> |
| 11 |
</li></ul> |
| 12 |
<p>with one of the following combinations: |
| 13 |
</p> |
| 14 |
<ul><li> <b>hex (#FF0000)</b> |
| 15 |
</li><li> <b>rgb (rgb(255,255,255))</b> |
| 16 |
</li><li> <b>names ("black")</b> |
| 17 |
</li></ul> |
| 18 |
<p><br /> |
| 19 |
</p><p><div class="options list"><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody> |
| 20 |
</table><b class="options">Example:</b><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody> |
| 21 |
<div class="example"> |
| 22 |
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> |
| 23 |
<div id="demo" class="tabs-container" rel="125"> |
| 24 |
A simple color animation.<br /> |
| 25 |
</p> |
| 26 |
<pre>$(".block").<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() { |
| 27 |
$(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: "black" }, 1000); |
| 28 |
},function() { |
| 29 |
$(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: "#68BFEF" }, 500); |
| 30 |
}); |
| 31 |
|
| 32 |
</pre> |
| 33 |
<p></div><div id="source" class="tabs-container"> |
| 34 |
</p> |
| 35 |
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 36 |
"<a href="http://www.w3.org/TR/html4/loose.dtd" class="external free" title="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> |
| 37 |
<html> |
| 38 |
<head> |
| 39 |
<script src="<a href="http://code.jquery.com/jquery-latest.js" class="external free" title="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script> |
| 40 |
|
| 41 |
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> |
| 42 |
|
| 43 |
<script> |
| 44 |
$(document).ready(function(){ |
| 45 |
$(".block").<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() { |
| 46 |
$(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: "black" }, 1000); |
| 47 |
},function() { |
| 48 |
$(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: "#68BFEF" }, 500); |
| 49 |
}); |
| 50 |
|
| 51 |
}); |
| 52 |
</script> |
| 53 |
<style> |
| 54 |
.block { |
| 55 |
color: white; |
| 56 |
background-color: #68BFEF; |
| 57 |
width: 150px; |
| 58 |
height: 70px; |
| 59 |
margin: 10px; |
| 60 |
} |
| 61 |
</style> |
| 62 |
</head> |
| 63 |
<body> |
| 64 |
<div class="block"> Click me</div> |
| 65 |
</body> |
| 66 |
</html> |
| 67 |
</pre> |
| 68 |
<p></div> |
| 69 |
</p><p></div> |
| 70 |
</p><p></tbody></table></div> |
| 71 |
</p><!-- |
| 72 |
Pre-expand include size: 3730 bytes |
| 73 |
Post-expand include size: 5382 bytes |
| 74 |
Template argument size: 3450 bytes |
| 75 |
Maximum: 2097152 bytes |
| 76 |
--> |
| 77 |
|
| 78 |
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3094-1!1!0!!en!2 and timestamp 20090603192313 --> |
| 79 |
|
