Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
Utilities
Position
Widget
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

Animate

Animate

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

Toggle Effect

Click the button above to preview the effect.

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


NameType
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>

NameType