Color Animation with jQuery UI
jQuery UI extends animation support so supported CSS color properties can transition between colors. Load jQuery first, then jQuery UI.
Load jQuery UI Top ↑
You can download jQuery UI from jqueryui.com, or use a versioned CDN file.
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>Animate a Background Color Top ↑
$("#panel").animate({
backgroundColor: "#fff3cd"
}, 600);Demo: animate background color →
Color Properties in the Original Tutorial Set Top ↑
The browser must support the underlying CSS property. jQuery UI supplies the color interpolation used by these examples.
| Property | Use |
|---|---|
backgroundColor | Background color |
borderBottomColor | Bottom border color |
borderLeftColor | Left border color |
borderRightColor | Right border color |
borderTopColor | Top border color |
color | Text color |
columnRuleColor | Column rule color when the CSS property is supported |
outlineColor | Outline color |
textDecorationColor | Text-decoration color when supported |
textEmphasisColor | Text-emphasis color when supported |
Correction: the older page listed
extEmphasisColor; the CSS property name is textEmphasisColor.← Previous: animate() · jQuery Effects
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
This article is written by plus2net.com team.
