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