jQuery UI API - Color Animation

The jQuery UI effects core adds the ability to usergb()、rgba(), hexadecimal values, or color names such as"aqua"to dynamically change the color property. Simply include the jQuery UI effects core file,.animate()and color will be supported.

The following properties are supported:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • columnRuleColor
  • outlineColor
  • textDecorationColor
  • textEmphasisColor

Support for color animations comes fromthe jQuery Color plugin. The Color plugin provides a number of functions for colors. For the full documentation, please visitthe jQuery Color documentation。

Class Animations

Although you can animate the color property directly, there is usually a better approach: include the styles in a class. jQuery UI provides some methods for dynamically adding or removing CSS classes, namely.addClass()、.removeClass()、 .toggleClass()and.switchClass(). These methods automatically determine which properties need to change and which need appropriate animations.

Examples

<!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>

Other extensions