jQuery fade in / out al passaggio del mouse?

Question

Ho collegamenti nel seguente struttura e vorrei sapere qual è il jQuery / css dovrebbe essere quello di nascondere i tag <img /> e fade in al passaggio del mouse.

L'idea qui è che il codice HTML è nascosto e sfuma in al passaggio del mouse per fornire un effetto liscio.

Nel frattempo uno sfondo CSS mostra in 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:

???

Una nota a parte, ho notato che jQuery verrà eseguito un'animazione più volte se l'elemento di destinazione è un nodo figlio che è nidificato un paio di livelli di profondità. Esiste un modo per fermare questo?

Answer 1

Basta aggiungere un attr style="display: none;" al codice HTML delle immagini, e quindi utilizzare questo:

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

(Modifica effetti per le vostre esigenze, se Mostra / Nascondi non è quello che ti serve)