JqueryUI - Color Animation

Advertisements

Previous Page
Next Page  

jQueryUI extends some core jQuery methods so that you can animate different transitions for an element. One of them being animate method. jQueryUI extends the jQuery animate method, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Following are the CSS properties that the animate method supports.

  • backgroundColor − Sets the background color of the element.

  • borderTopColor − Sets the color for top side of the element border.

  • borderBottomColor − Sets the color for bottom side of the element border.

  • borderLeftColor − Sets the color for left side of the element border.

  • borderRightColor − Sets the color for right side of the element border.

  • color − Sets the text color of the element.

  • outlineColor − Sets the color for the outline; used to emphasize the element.

Syntax

The following is the syntax of the jQueryUI animate method −

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

You can set any number of properties in this method separated by , (comma).

Example

The following example demonstrates the use of addClass() methods.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://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: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

Let us save the above code in an HTML file animateexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Click on the button and see how the animation changes of the box.

Advertisements