grisés divs Utilisation JQuery

Question

Im essayant d'utiliser ce code:

<script> 
jQuery('#MySelectorDiv').fadeTo(500,0.2); 
</script> 

à disparaître un tas de divs nommé MySelectorDiv, la seule chose est, il se fane seulement à la 1ère place de tous. .. pourquoi donc?

Je voudrais aussi unfade la div lors du survol, donc en gros tous les divs seraient grisés sauf celui actif étant converties.

espère que vous comprenez.

Answer 1

seule la première est d'être fanée parce que vous utilisez une carte d'identité au lieu d'une classe.

Si vous voulez que tous vos divs à effacent alors au lieu de le faire:

<div id="MySelectorDiv">...</div> 

faire ceci:

<div class="MySelectorDiv">...</div> 

et changer votre chaîne de sélecteur jquery à '.MySelectorDiv'

La raison ça ne fonctionne pas actuellement parce que les ID sont censés être uniques sur la page, donc jQuery ne cherchera pas à trouver tous les éléments, juste le premier qui correspond à cet ID.

Quant à la décoloration sur le vol stationnaire:

$(".MySelectorDiv") 
    .fadeTo(500, 0.2) 
    .hover(function() { 
     $(this).fadeTo(500, 1); 
    }, function() { 
     $(this).fadeTo(500, 0.2); 
    }); 

Cette première fane vos divs, puis se fixe un événement de vol stationnaire sur eux - où la première fonction est exécutée lorsque la souris entre dans la zone et la deuxième fonction est exécutée lorsque votre souris quitte la zone.

Answer 2

Parce que vous utilisez une carte d'identité, pas une classe. Les ID doivent être uniques sur une page, tandis que les classes peuvent être répétées. Changez simplement tous vos divs pour utiliser un class = "myselectordiv" au lieu d'un id. Votre sélecteur jQuery changerait alors à:

jQuery('.myselectordiv')... 

Pour obtenir l'effet de survol:

// Fade everything out first 
jQuery('.myselectordiv').fadeTo(500, 0.2); 
jQuery('.myselectordiv').hover(function() { 
    // Mouse enter, fade in 
    jQuery(this).fadeTo(500, 1); 
}, function() { 
    // Mouse leave, fade out 
    jQuery(this).fadeTo(500, 0.2); 
}); 

Cela lie deux fonctions à votre divs, un pour mouseenter et un pour mouseleave, et comme vous pouvez le voir, ils faire des fadeTos opposés les uns aux autres.

Note: il y a cependant un problème subtil, que vous remarquerez si vous déplacez votre souris sur les divs plutôt rapidement. Même après avoir déplacé votre souris de la div, si elle l'était encore, elle continuera à compléter l'animation avant qu'elle ne disparaisse à nouveau. Ce peut être ce que vous voulez, mais si vous déplacez votre souris rapidement entre les deux divs, ils seront tous deux disparaître de façon continue et à la suite parce qu'une longue file d'attente d'effets d'animation ont entassé. Pour éviter cela, ajouter un .stop() avant chaque fadeTo() à l'intérieur du vol stationnaire:

jQuery(this).stop().fadeTo(500, 1); 

Démo: http://jsfiddle.net/mm8Fv/