JQuery UI Color Animation

In the core JQuery sections we studied how to change the color properties of any element when an event occurs. However, to perform animations while manipulating color properties is a cumbersome task in core JQuery. For instance, you might to change the color of a div with smooth transition when a user clicks some button. Such tasks require custom logic. However, JQuery UI Color Animation functions make it very easy to achieve such functionalities. To create color animations in JQuery UI, simply call animate() function on the elements on which you want to perform animations. Inside the animate function you can specify the type of color animation you want to perform. Take a look at the following example.

JQuery UI Background Color Animation

In the following code, we shall change the background color of an element with smooth animation on upon button click. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script type="text/javascript">
         $(document).ready(function() {
            $('#animbutton').click(function() {
               $('#animelement').animate({
                  backgroundColor: "#ccc",
                  color: "#fff"
               })
            })
         });
      </script>
       
       <style>
           .animClass{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               border-radius: 100%;
               text-align: center;
           }
       </style>
   </head>
   <body>
      <div id="animelement" class="animClass">
         Hello!
      </div>
      <button id="animbutton">Click Me</button>
   </body>
</html>

Download Code Run Code

When you open the above page in a browser, you should see a circular div with light blue background and black text. Clicking the button should smoothly change the color of the div to grey and text within it to white.

JQuery UI Outline Color Animation

You can also change the outline of any element using parameters within the animate function. For instance if you want to add outline to any html element you can do so using outlineColor property. Take a look at the following example to see outlineColor parameter in action.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Spinner</title>
       <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script type="text/javascript">
         $(document).ready(function() {
            $('#animbutton').click(function() {
               $('#animelement').animate({
                  outlineColor: "#333",
                  backgroundColor: "#fff"
               })
            })
         });
      </script>
       
       <style>
           .animClass{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               text-align: center;
           }
       </style>
   </head>
   <body>
      <div id="animelement" class="animClass">
         <em>Hello</em>!
      </div>
      <button id="animbutton">Click Me</button>
   </body>
</html>

Download Code Run Code

Clicking the button in the above webpage should change the background color of the div to white and should add an outline around it. There are other JQuery UI color animation properties as well which allow users to manipulate different color properties. Some of these properties are backgroundColor, textDecorationColor, borderBottomColor, borderLeftColor, borderTopColor, borderRightColor, color, columnRuleColor, outlineColor, textEmphasisColor

<<< JQuery UI TooltipJQuery UI Effect >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .