Skip to content Skip to sidebar Skip to footer

Fade Out/in Sperate Divs With Button Click

I saw a flash website and was curious to now if this is something possible to build using Jquery, obviously not the entire thing. I was more looking to fade out div1 and div2 with

Solution 1:

Your question is very vague, but hopefully this example will get you started in the right direction: http://jsfiddle.net/3mJ3z/

Basically, there are 3 menu items, and 3 corresponding content items. When you click the menu item, all the other content items disappears and the corresponding content item fades in. The HTML:

<divclass="item-1 content-item">
    I am the content for item 1
</div><divclass="item-2 content-item"style="display: none;">
    I am the content for item 2
</div><divclass="item-3 content-item"style="display: none;">
    I am the content for item 3
</div><ul><liclass="change-item"data-item="1">Item 1</li><liclass="change-item"data-item="2">Item 1</li><liclass="change-item"data-item="3">Item 1</li></ul>

The JS:

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();
});​

Post a Comment for "Fade Out/in Sperate Divs With Button Click"