jQuery fade in/out on mouseover?

Question

I have links in the following structure and I would like to know what the jQuery/css should be to hide the <img /> tags and fade them in on mouseover.

The idea here is that the HTML <img> is hidden and fades in on mouseover to provide a smooth effect.

Meanwhile a CSS background shows in the beginning.

HTML:

<div id="nav">

<a href="blah" id="id1">

<img src="hoverimg.png" alt="Link Text 1" /> <span> Link Text 1 </span> </a>

<img src="hoverimg2.png" alt="Link Text 2" /> <span> Link Text 2 </span> </a>

</div>

CSS:

#nav a span{
  display: none; /* Hide the text reader title */
}

#nav a {
  display: block;
  height: 200px;
  width: 250px;
  background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */
}

#nav a img{
  /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */
}

jQuery:

???

On a side note, I've noticed that jQuery will run an animation multiple times if the target element is a child node that is nested a few levels deep. Is there a way to stop this?

Answer 1

Just add a style="display: none;" attr to the image html, and then use this:

       $("#nav").hover(
            function() {
                $("img", this).show();
            },
            function() {
                $("img", this).hide();
            });

(Modify effects for your needs if show/hide isn't what you need)