Image Hover Animation in JQuery

Shinuraj
12y
14.7k
0
0

Article

Try out the following code snippet to animate images on mouse over using jQuery.

Step 1: Add the following code in the head section

<head>
<title>Image hover animation </title>
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#container img').animate({
            "opacity": .5
        });
        $('#container img').hover(function() {
            $(this).stop().animate({ "opacity": 1 });
        }, function() {
            $(this).stop().animate({ "opacity": .5 });
        });

});
</script>
</head>

Step 2: Add the following code in the body section.

HTML:

<body>
<div id="container" >
<img src="Images/test.jpg" alt="" ></img>
</div>
</body>

PFA the sample application

Thanks

Shinu