CODEWITHSUNDEEP
jquery
user39980
user39980

Reputation:

jQuery Style effect - fade out other boxes

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?

Upvotes: 0

Views: 2030

Answers (5)

cgp
cgp

Reputation: 41381

This is probably exactly what you want:

jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?

It includes an example.

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

Upvotes: 1

KyleFarris
KyleFarris

Reputation: 17548

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

Upvotes: 0

zalew
zalew

Reputation: 10311

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 :)

Upvotes: 0

Paul
Paul

Reputation: 6218

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>

Upvotes: 0

Matt
Matt

Reputation: 2230

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.

Upvotes: 0

Related Questions