jQuery & jQuery UI Documentation

jQuery & jQuery UI

previous page next page

animate

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")

Example:
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://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.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>

previous page start next page