« Back to the jQuery UI Docs

The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:

- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- color
- outlineColor

with one of the following combinations:

- hex (#FF0000)
- rgb (rgb(255,255,255))
- names ("black")

Name | Type
--- | ---

Example:

Name | Type
--- | ---

- Demo
- View Source

A simple color animation.

    $(".block").toggle(function() {
        $(this).animate({ backgroundColor: "black" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>

      <script src="http://jqueryui.com/latest/ui/effects.core.js"></script>

      <script>
      $(document).ready(function(){
        $(".block").toggle(function() {
        $(this).animate({ backgroundColor: "black" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });

      });
      </script>
      <style>
      .block {
        color: white;
        background-color: #68BFEF;
        width: 150px;
        height: 70px;
        margin: 10px;
      }
      </style>
    </head>
    <body>
      <div class="block"> Click me</div>
    </body>
    </html>