Image ease in upon mouse over of link

First off I am relatively new to JavaScript/jQuery.

I want to achieve an effect by JavaScript or jQuery that upon a mouseover of a link a image will "ease in" the content area and become visible. Upon mousing out the image would disappear. I've looked for such a technique/effect with no success.

The image will ease in over the content area, covering the background image. The links are in the same content area and will still be visible above the image easing in which I think I can accomplish by a z-index. When I mouse over the开发者_运维百科 next link the next image will appear. There will be three images in total.

Any help, guidance or direction to a tutorial that does just that would be greatly appreciated.

This can be accomplished pretty easily with jQuery using the .hover() method, which accepts handlers for mouse-in and mouse-out, and the .animate() method to change the opacity of the contained image:

$('.easer').hover(function(e){
    $(this).find('img').stop(true,false).animate({'opacity':'1'});
},function(e){
    $(this).find('img').stop(true,false).animate({'opacity':'0'});
});

See an example of the above here.