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