jQuery: ¿Cómo fundido de salida una lista de divs uso menos frecuente, y el fundido de entrada en mouseover?

Question

Supongamos que tiene un montón de elementos en una página web no se utiliza mucho, ¿cómo puede jQuery ellos se desvanecen un poco, pero sólo cuando no hay encima del ratón? Se debe desactivarse hasta pasar el ratón!

Answer 1

Lo resuelto de esta manera:

//list the items you want to fade out in normal selector format
var arr = [ "#navTop","#banner","#idViewToolbar","#fbsidebar","#idActionP","table.noBorder" ];


//delay function by Clint Helfers
$.fn.delay = function( time, name ) {

    return this.queue( ( name || "fx" ), function() {
        var self = this;
        setTimeout(function() { $.dequeue(self); } , time );
    } );

};

$.each( arr, function(i, l){
   jQuery(l).fadeTo(600, 0.10);
   jQuery(l).mouseenter(function(){
        jQuery(this).fadeTo(600, 1);
    });

       jQuery(l).mouseleave(function(){
        jQuery(this).delay(5000).fadeTo(600, 0.10);
    });

 });

En realidad, utilizado para FogBugz - tienen un plugin que le permite insertar su propio CSS + JavaScript en la página, lo uso a desaparecer más cosas, pero la lista de errores / función que estoy trabajando

Answer 2

Si usted no necesita el material de animación se puede hacer esto con CSS puro mediante el selector :hover psoudo sin embargo hay también un método .hover() en jQuery, que le ayudará a lograr este efecto. algo como esto: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

Answer 3

Para realmente poner lo antpaw recomendada en código. Hacer lo siguiente.

$(".my_less_used_divs").hover(function() {
    $(this).css("opacity", 1);
}, function() {
    $(this).css("opacity", .5);
}).css("opacity", .5);

Se debe dar antpaw la respuesta aceptada si te gusta esto.

Answer 4

$(".divfade").hover(function() {
    $(this).fadeTo("slow", 1);
}, function() {
    $(this).fadeTo("slow" , .5);
}).css("opacity", .5);

Este código hace fade in y fade out.