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