Fade out/in sperate divs with button click [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 6 years ago.

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 a button click. This is the example site: www.justinfarrellyconstruction.com

Example: If i come to the homepage and click the portfolio button the Gallery Div will fade out then fade in another image. At the same time the Text div will fade out its content and load the portfolio text.

My apologies if this does not make sense, this is all quite new to me and im trying got learn.

回答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:

<div class="item-1 content-item">
    I am the content for item 1
</div>

<div class="item-2 content-item" style="display: none;">
    I am the content for item 2
</div>

<div class="item-3 content-item" style="display: none;">
    I am the content for item 3
</div>

<ul>
    <li class="change-item" data-item="1">Item 1</li>
    <li class="change-item" data-item="2">Item 1</li>
    <li class="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();
});​

来源：https://stackoverflow.com/questions/13942811/fade-out-in-sperate-divs-with-button-click