jQuery UI Color Animation

jQuery UI adds some methods in core jQuery to extend the features of animate functionality. You can animate different transitions for an element. jQuery UI also supports animating colors. Here, you can animate one or more CSS properties that define an element colors.

Following is a list of CSS properties that support animate method.

backgroundColor :It is used to set the background color of the element.
borderTopColor :It is used to set the color for top side of the element border.
borderBottomColor :It is used to set the color for bottom side of the element border.
borderLeftColor :It is used to set the color for left side of the element border.
borderRightColor : It is used to set the color for right side of the element border.
color :It is used to set the text color of the element.
outlineColor : It is used to set the color for the outline; used to emphasize the element.

Syntax for the jQuery UI animate method:

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

If you want to add more than one property in this method, you will have to separate them with a comma.

Example of jQueryUI Color animation

Let's take an example to demonstrate the color animate method with the use of addClass() method.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI addClass Example</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<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>
<style>
 .elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#button-1').click(function() {
$('#animTarget').animate({
backgroundColor: "red",
color: "white"
})
 })
});
</script>
</head>
<body>
<div id=animTarget class="elemClass">
Hello JavaTpoint </div>
<button id="button-1">Click Me</button>
</body>
</html>

Test it Now

jQuery UI Color Animate with Toggle

Let's take an example to demonstrate the color animate method with the use of toggle effect:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - Animate demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script>
  $(function() {
    var state = true;
    $( "#button" ).click(function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  });
  </script>
</head>
<body>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
   jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML.
</p>
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
</body>
</html>

Test it Now

Next TopicjQuery UI Easing

← prev next →