jQuery: How do I fade-out a list of less frequently used divs, and fade-in on mouseover?

Question

Say you have a bunch of elements on a webpage you don't use much, how can jQuery fade them a little, but only when there is no mouseover? It must fade back on mouseover!

Answer 1

if you dont need the animation stuff you can do this with pure css by using the :hover psoudo selector however there is also a .hover() method in jquery, it will help you to achieve this effect. something like this: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);

Answer 2

I solved it like this:

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

 });

I actually used it for FogBugz - they have a plugin that lets you insert your own CSS + Javascript into the page, I use it to fade out most stuff but the bug/feature list I'm working on.

Answer 3

To actually put what antpaw recommended into code. Do the following.

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

You should give antpaw the accepted answer if you like this.