Menu ▼



Posted By :
avatarmrkraju
Total Views : 367

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>





comments powered by Disqus


Search dotnetlearners.com