jQuery fade in / out en mouseover?

Question

Tengo enlaces en la estructura siguiente y me gustaría saber cuál es el jQuery / css debe ser para ocultar las etiquetas <img /> y se desvanecen en pasar el ratón.

La idea aquí es que la etiqueta HTML se oculta y se desvanece en pasar el ratón para proporcionar un efecto suave.

Mientras tanto un fondo CSS muestra en el principio.

HTML:

  

     

     

Link Text 1   

     

Link Text 2   

     

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:

???

En una nota lateral, me he dado cuenta de que jQuery se ejecuta una animación varias veces si el elemento de destino es un nodo hijo que está anidado unos niveles de profundidad. ¿Hay una manera de detener esto?

Answer 1

Sólo tiene que añadir un attr style="display: none;" a la html imagen, y luego usar esto:

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

(Modificar efectos para sus necesidades si mostrar / ocultar no es lo que necesita)