Mouse Hover Fadding Effect

<html>
    <head>
    <script type="text/javascript" src="jquery-1.4.4.js"> </script>
    <script type="text/javascript">
//        Start the main function of jquery
        $(document).ready(function ()
        {
//            Start the function for hover event
            $("#btn1").hover(function ()
            {
//                Give the value of fade to button(value between 0 to 1)
                $("#btn1").fadeTo("slow", 0.25);
            }, function ()
                {
                    $("#btn1").fadeTo("slow", 1);
                });
            $("#btn2").hover(function ()
                {
                    $("#btn2").fadeTo("slow", 0.25);
                }, function ()
                {
                    $("#btn2").fadeTo("slow", 1);
                });
        });
    </script>
    </head>
    <body>
        <h1>JQuery Mouse Hover Event Demo </h1>
        <input id="btn1" type="button" value="Button 1"/><br/><br>
        <input id="btn2" type="button" value="Button 2"/><br/><br>
    </body>
</html>
Ebook Download
View all
Learn
View all