Animate control background color in hover event using jQuery & jQuery UI

By using jQuery animate, we can give the fadein fadeout effect to control background color. This example will show you how to animate control background color using jQuery.
Note: Animate function will not work with background color, to make it work we need to use jQueryUI. So we need to add reference to jQueryUI file.

Syntax:

$(selector).animate({ backgroundColor: "colorcode" }, timeinterval);

Example:
Place the cursor here to see the hover effect using jQuery & jQueryUI.

Code:
$(document).ready(function () { $("#divhover").hover(function () { $(this).animate({ backgroundColor: "red" }, 2000); }, function () { $(this).animate({ backgroundColor: "green" }, 2000); }); });


Source Code:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script language="javascript"> $(document).ready(function () { $("#divhover").hover(function () { $(this).animate({ backgroundColor: "red" }, 2000); }, function () { $(this).animate({ backgroundColor: "green" }, 2000); }); }); </script> </head> <body> <div id="divhover" style="height: 100px; width: 200px; cursor: pointer; background: green; padding: 20px; font-size: 20px; color: #fff;"> Place the cursor here to see the hover effect using jQuery & jQueryUI. </div> </body> </html>