用按钮单击淡出/在淡出div [英] Fade out/in sperate divs with button click

问题描述

我看到一个flash网站，现在很想知道如果这是使用jquery构建的东西，显然不是全部。我更倾向于用按钮单击淡出div1和div2。
这是示例网站：
www.justinfarrellyconstruction.com

例如：
如果我来到主页并点击投资组合按钮Gallery Div将淡出，然后淡入另一张图像。与此同时，文本div将淡出其内容并加载投资组合文本。

如果这没有意义，我很抱歉，这对我来说都是全新的我试图得到学习。

解决方案

你的问题非常模糊，但希望这个例子能让你开始朝正确的方向发展： a href =http://jsfiddle.net/3mJ3z/ =nofollow> http://jsfiddle.net/3mJ3z/

基本上有3个菜单项和3个相应的内容项。当您点击菜单项目时，所有其他内容项目都会消失，并且相应的内容项目会淡入。HTML：

 < div class =item-1 content-item> 
我是项目1的内容
< / div> 
 
< div class =item-2 content-itemstyle =display：none;> 
我是项目2的内容
< / div> 
 
< div class =item-3 content-itemstyle =display：none;> 
我是项目3的内容
< / div> 
 
< ul> 
< li class =change-itemdata-item =1>第1项< / li> 
< li class =change-itemdata-item =2>第1项< / li> 
< li class =change-itemdata-item =3> Item 1< / li> 
< / ul> 
 
  

JS：

< $（$。$ this）.attr（data-item）; $ b $（'。change-item'）。click（function（）{
var this_item = $ $ b $（'。content-item'）。hide（）;
$（'。item-'+ this_item）.fadeIn（）;
}）;


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.

解决方案

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();
});​

这篇关于用按钮单击淡出/在淡出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！