jQuery fade in / out sur mouseover?

Question

J'ai des liens dans la structure et je suit voudrais savoir ce que le jQuery / css devrait être de cacher les balises et les <img /> disparaître dans le passage de la souris.

L'idée ici est que le HTML est caché et apparaît en fondu sur mouseover pour fournir un effet lisse.

Pendant ce temps un fond CSS montre au début.

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:

???

Sur une note de côté, je l'ai remarqué que jQuery fonctionnera une animation plusieurs fois lorsque l'élément cible est un nœud enfant qui est imbriqué quelques niveaux de profondeur. Y at-il un moyen d'arrêter cela?

Answer 1

Il suffit d'ajouter un attr style="display: none;" au code HTML d'image, puis utilisez ceci:

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

(Modifier les effets pour vos besoins si montrer / cacher est pas ce que vous avez besoin)