Comment avoir plusieurs instances d'un effet jQuery

Question

D'abord, le disclaimer- Je commence juste avec jQuery. Je m'excuse pour mon incompétence. :)

Mon problème est que j'essaie d'utiliser un effet de survol jQuery sur un ensemble d'éléments distincts sur une page. En ce moment, quand je souris sur un, ils font tous l'effet en même temps parce qu'ils ont le même nom de classe, et jQuery les sélectionne tous. Je sais que je pourrais utiliser un nom différent pour chacun, et écrire un morceau distinct de jQuery pour chaque classe, mais y a-t-il un meilleur moyen? Je prévois d'avoir plusieurs de ces éléments.

Quoi qu'il en soit, une image vaut mille mots. Découvrez la source de ma page de test ici: Click Here Passez la souris sur les images 'test'. Je veux que l'effet s'applique à celui sur lequel vous passez la souris.

Voici mon jQuery novice:

$(document).ready(function(){ 

$('.box').hover(function() { 
$('.rollover').fadeIn('slow'); 
$('.description').fadeIn('fast'); 
}); 

$('.box').mouseleave(function() { 
$('.rollover').fadeOut('slow'); 
$('.description').fadeOut('fast'); 
}); 


}); 

Answer 1

$('.box').hover(function() { 
    $(this).next('.rollover').fadeIn('slow'); 
    $(this).find('.description').fadeIn('fast'); 
}, function() { 
    $(this).next('.rollover').fadeOut('slow'); 
    $(this).find('.description').fadeOut('fast'); 
}); 

La méthode .hover() accepte deux fonctions au feu pour mouseenter et mouseleave.

Dans chaque fonction, le mot-clé this fait référence à l'élément .box ayant reçu l'événement. Ensuite, vous utilisez .find() pour obtenir le .description imbriqué, et .next() pour obtenir le frère .rollover adjacent.

• http://api.jquery.com/hover/
• http://api.jquery.com/find/
• http://api.jquery.com/next/

Dans votre situation, vous pouvez utiliser .siblings('.rollover') au lieu de .next() si vous voulez.

• http://api.jquery.com/siblings/

Answer 2

Si je pouvais les sélectionner un à la fois, je pense que je pourrais appliquer l'effet que pour leurs enfants. Je souhaite juste que vous puissiez dire à jquery de simplement sélectionner ce que votre souris est terminée sans indiquer un ID ou une classe ...