en gris divs con jQuery

Question

Im tratando de utilizar este código:

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

a desaparecer un montón de divs nombrados MySelectorDiv, la única cosa es, que sólo se desvanece a cabo la primera uno en lugar de todos ellos. .. ¿porqué es eso?

También me gustaría desvincular el div en rollover, por lo que, básicamente, todos los divs se atenuarán, excepto el activo que se transfiere.

Espero que lo entiendas.

Answer 1

solo el primero se está desvaneciendo porque está usando una ID en lugar de una clase.

Si desea que todos los divs a desaparecer entonces en vez de hacer esto:

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

hacer esto:

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

y cambiar la cadena de selector de jQuery para '.MySelectorDiv'

La razón no funciona actualmente porque ID se supone que es único en la página, por lo tanto, jQuery no se molestará en encontrar todos los elementos, solo el primero que coincida con ese ID.

En cuanto a la decoloración en vuelo estacionario:

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

Esta primera desvanece su divs, a continuación, adjunta un evento de vuelo estacionario sobre ellos - donde se ejecuta la primera función cuando el ratón entra en el área y la segunda función se ejecuta cuando tu mouse deja el área

Answer 2

Porque está usando una identificación, no una clase. Los ID deben ser únicos en una página, mientras que las clases pueden repetirse. Simplemente cambie todos sus divs para usar una clase = "myselectordiv" en lugar de una identificación. Su selector de jQuery cambiaría entonces a:

jQuery('.myselectordiv')... 

Para obtener el efecto de rollover:

// 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); 
}); 

Esto une dos funciones a su divs, uno para mouseenter y otro para mouseleave, y como se puede ver que hacer fadeTos opuestos el uno al otro.

Nota: sin embargo, hay un problema sutil, que notará si mueve el mouse sobre los divs con bastante rapidez. Incluso después de mover el mouse de la div, si todavía estaba desapareciendo, continuará completando la animación antes de que desaparezca nuevamente. Este puede ser lo que quieras, pero si mueves el mouse rápidamente entre dos divs, ambos se desvanecerán continuamente después porque se acumuló una larga cola de efectos de animación. Para evitar esto, añadir un .stop() antes de cada fadeTo() el interior el elemento emergente:

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

Demostración: http://jsfiddle.net/mm8Fv/