rollover image uisng Jquery

Hi please check below code,

$(document).ready(function () {
  $("#aMenu").hover(function () {
    $(this).children().eq(1).animate({
      opacity: 1
    }, 300);
  }, function () {
    $(this).children().eq(1).animate({
      opacity: 0
    }, 300);
  });
});

Here is an html for one menu button:

<div>
  <a id="aMenu" href="/web-design/">
    <img style="position:absolute;" class="" src="greyImage.png">
    <img class="" src="colorImage.png" style="opacity: 0;">
  </img></img></a>
</div>

This is very interesting. Actually there are two image overlapping one another. The colorful image is place below the grey image and its opacity is 0. So when user hover his mouse on the grey image(actually the a tag) the colorful image's opacity has be increased to 1 with jQuery animate() function. The process of animate function is given on top. The grey image's display property is set to inline. So when colored image's opacity is increased then it seems to come forward and make that effect. Please apply your creativity with this process and I hope you will make beautiful effect as well.

Thanks.