jQuery Style effect - fade out other boxes

Question

Hey,

I have been trying to create something like: http://jquerystyle.com/index.php - when you go over one it sets a class on rollover, and the other fade out, has anyone heard of a resource to do so?

Thanks,

Ryan

Answer 1

You shouldn't need a plugin or anything because it should be rather simple.

Let's assume you are using an unordered list to contain the elements and you give it an id called "nav".

You would use the hover event to set your item to "Active" and the others "Inactive".

$(document.ready() {
    $('ul#nav li').hover(function() {
        $(this).closest('ul#nav').find('li').addClass('inactive');
        $(this).removeClass('inactive').addClass('active');
    },
    function() {
        $(this).closest('ul#nav').find('li').removeClass('inactive');    
        $(this).removeClass('active');
    }
});

You can style each using the active and inactive classes now. You can also do fade/other animations on each item by adding to the chain.

Answer 2

This should get you started.

Javascript:

$(function() {
    $(".InnerBox").hover(function() {
        $(this).css('color', 'black').siblings(".InnerBox").css('color', 'gray')
    });
    $(".OuterBox").mouseout(function() {
        $(this).find(".InnerBox").css('color', 'black')
    });
});

HTML

   <div class="OuterBox">
   <div class="InnerBox">1</div>
   <div class="InnerBox">2</div>
   <div class="InnerBox">3</div>   
   </div>

Answer 3

http://docs.jquery.com/Effects/fadeOut http://docs.jquery.com/Effects/fadeIn

Although the effect is 'fading out', I guess the way to do that would be fading in a div with a background of half pixels transparent, half pixels black.

Try sth like this

$(".box").hover(function () {
    $(".box:not(:hover) > div").fadeIn("slow");
});

where the > div is the one with the dark background. Not tested, treat it as pseudocode :)

Answer 4

This is probably similar to how they are doing it on that page:

$(function() {
    $('img.fader').bind('mouseover',function() {
        $(this).siblings('.fader').fadeOut('slow');
    }).bind('mouseout',function() {
        $('img.fader').fadeIn('slow');
    });
});

Answer 5

This is probably exactly what you want:

http://stackoverflow.com/questions/760280/jquery-fading-dimming-other-list-elements-when-one-is-hovered-over-im-90-there/760460#760460

It includes an example.

(naturally, I'm a bit biased, but it is exactly what you are looking to do)