Latest web development tutorials

jQuery UI API - Color Animation (Color Animation)

jQuery UI core adds special effects using the rgb() , rgba() , hexadecimal values or color names such as "aqua" to dynamically change the function color attributes. Only you need to include jQuery UI effects core file, .animate() will support color.

It supports the following attributes:

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

Support for color animation from jQuery Color plugin . Color plug-in provides a number of functions for color. To view the complete document, visit the jQuery Color documents .

Animation Class (Class Animations)

Although it is possible to animate color attributes directly, but usually better alternative method that contains the styles in a class of. jQuery UI provides methods to dynamically add or remove CSS classes, namely .addClass() , .removeClass() , .toggleClass() and .switchClass() . These methods will automatically determine which properties need to be changed and what needs to apply the appropriate animation.

Examples

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> Color Animation (Color Animation) Demo </ 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"> Color Animation </ div>
<Button id = "toggle"> change color </ button>
 
<Script>
$ ( "#toggle") .click (Function () {
  $ ( "#elem") .animate ({
    color: "green",
    backgroundColor: "rgb (20, 20, 20)"
  });
});
</ Script>
 
</ Body>
</ Html>