jQuery: Come faccio a fade-out un elenco di meno frequentemente utilizzati div, e fade-in al passaggio del mouse?

Question

Diciamo che avete un mucchio di elementi su una pagina web non si usa molto, come può jQuery dissolvenza loro un po ', ma solo quando non v'è alcun passaggio del mouse? Essa deve svanire di nuovo al passaggio del mouse!

Answer 1

ho risolto in questo modo:

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

 });

In realtà ho usato per FogBugz - hanno un plugin che permette di inserire il proprio CSS + JavaScript nella pagina, lo uso per fade out più roba, ma la lista dei bug / caratteristica su cui sto lavorando

Answer 2

se non avete bisogno la roba di animazione che si può fare questo con CSS puro con il selettore :hover psoudo tuttavia v'è anche un metodo .hover() in jQuery, che vi aiuterà a ottenere questo effetto. qualcosa di simile: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

Answer 3

Per mettere in realtà ciò che antpaw raccomandato in codice. Fare quanto segue.

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

Si dovrebbe dare antpaw la risposta accettata se vi piace questo.

Answer 4

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

Questo codice non fade in e fade out.