JQuery Fade In/Out On MouseOver?

Question

Eu tenho links na seguinte estrutura e gostaria de saber qual deve ser o jQuery/css <img /> Tags e desbota -os no MouseOver.

A ideia aqui é que o htmlu003Cimg> está oculto e desaparece no MouseOver para fornecer um efeito suave.

Enquanto isso, um plano de fundo CSS mostra no início.

Html:

u003Cdiv id="nav">

u003Ca href="blah" id="id1">

u003Cimg src="hoverimg.png" alt="Texto de link 1"n />u003Cspan>Texto de link 1u003C/span>

u003Cimg src="hoverimg2.png" alt="Texto de link 2"n />u003Cspan>Texto de link 2u003C/span>

u003C/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:

???

Em uma nota lateral, notei que o jQuery executará uma animação várias vezes se o elemento de destino for um nó filho aninhado com alguns níveis de profundidade. Existe uma maneira de parar isto?

Answer 1

Basta adicionar um style="display: none;" Att à imagem html e depois use isto:

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

(Modifique os efeitos para suas necessidades se mostrar/ocultar não é o que você precisa)