JQuery: Como desbote uma lista de divs usados ​​com menos frequência e desbotamento no MouseOver?

Question

Digamos que você tenha um monte de elementos em uma página da web que não usa muito, como o jQuery pode desbotá -los um pouco, mas somente quando não há mouseOver? Deve desaparecer de volta no MouseOver!

Answer 1

Eu resolvi assim:

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

 });

Na verdade, eu o usei para o Fogbugz - eles têm um plug -in que permite inserir seu próprio JavaScript CSS + na página, eu o uso para desbafar a maioria das coisas, mas a lista de bugs/recursos em que estou trabalhando.

Answer 2

Se você não precisa do material da animação, pode fazer isso com CSS puro usando o :hover seletor de psoudo, no entanto, também existe um .hover() Método no jQuery, ajudará você a alcançar esse efeito. algo assim: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

Answer 3

Para realmente colocar o que Antpaw recomendou em código. Faça o seguinte.

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

Você deve dar a Antpaw a resposta aceita, se quiser.

Answer 4

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

Este código desaparece e desaparece.