Javascript 当单击时，jquery fade将div切换到另一个div上？

是我的测试页面，我想在加载页面时隐藏所有内容。当我点击“关于”时，文本会使用fadeToggle（）淡入；但当我点击“我的作品”时，另一个文本淡入，但在前一个文本下。我想让它比上一个淡一点。你能帮我吗

我的代码：

$（文档）.ready（函数（）{
$（“.thumbnail”）.hide（）；
$（“.work”）。单击（函数（）{
$（“.thumbnail”）.fadeToggle（'slow'）；
});
});
$（文档）.ready（函数（）{
$（“.person”）.hide（）；
$（“.about”）。单击（函数（）{
$（“.person”）.fadeToggle（'slow'）；
});
});

试试这个

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();

    $(".work").click(function(){
        $(".person").hide();
        $(".thumbnail").fadeToggle('slow');      
    });


    $(".about").click(function(){
        $(".thumbnail").hide();
        $(".person").fadeToggle('slow');      
    });
});

根据马修的评论进行更新 试试这个

$(document).ready(function(){
    $(".thumbnail").hide();
    $(".person").hide();

    $(".work").click(function(){
        $(".person").hide();
        $(".thumbnail").fadeToggle('slow');      
    });


    $(".about").click(function(){
        $(".thumbnail").hide();
        $(".person").fadeToggle('slow');      
    });
});

根据马修的评论进行更新

---

这是一项非常容易完成的工作，最好对要打开的div使用相同的click事件名称，这样它就可以模块化了

HTML有一些细微的修改，JS也有很大的变化，但现在它可以处理任意多的部分，而不必不断添加新的

click（）

函数

$（文档）.ready（函数（）{
$（'section'）.hide（）；
$（“.btn”）。单击（函数（）{
$（'section'）.fadeOut（'1000'）；
$（'section#'+$（this.attr（'id'））.delay（'1000'）.fadeIn（）；
});
});
/*CSS文档
html{
背景：url（green.jpg）无重复中心固定；
背景尺寸：封面；
} 
*/
身体{
字体系列：“Candara”、“Open Sans”、“Sans serif”；
}
/*闪亮按钮的css*/
.btn{
光标：指针；
利润率：10px；
文字装饰：无；
填充：10px；
字体大小：14px；
过渡：.3s；
-webkit转换：.3s；
-moz跃迁：.3s；
-o-转变：.3s；
显示：内联块；
}
.btn:悬停{
游标：url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur)，汽车；
}
.联系方式{
颜色：#000；
}
.联系人：悬停{
背景色：#ecf0f1；
颜色：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
.关于{
颜色：#000；
}
.关于：悬停{
背景色：#ecf0f1；
颜色：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
.工作{
颜色：#000；
}
.工作：悬停{
背景色：#ecf0f1；
颜色：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
}
.按钮{
填充顶部：30px；
文本对齐：居中；
位置：绝对位置；
顶部：50px；
左：100px；
}
标题
.副标题{
字体系列：“Wire one”；
字体大小：正常；
字号：5em；
边缘底部：15px；
文本对齐：居中；
}
.副标题{
线高：.9em；
字体大小：5.5em；
边际上限：0；
边缘底部：40px；
}
.标语{
字号：1.4em；
线高：1.3em；
字体大小：正常；
文本对齐：居中；
}
.缩略图{
背景色：rgba（255、255、255、.2）；
边界：0无；
填充：10px；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
}
.缩略图.标题{
颜色：继承；
}

，谢谢大家！

缩略标签
Lorem ipsum dolor sit amet，奉献精英。这张脸上清楚地显示了铜酸盐的生命



缩略标签
Lorem ipsum dolor sit amet，奉献精英。这张脸上清楚地显示了铜酸盐的生命



缩略标签
Lorem ipsum dolor sit amet，奉献精英。这张脸上清楚地显示了铜酸盐的生命



缩略标签
Lorem ipsum dolor sit amet，奉献精英。这张脸上清楚地显示了铜酸盐的生命



这是一件非常容易完成的事情，最好对要打开的div使用相同的click事件名称，这样它就可以模块化了

HTML有一些细微的修改，JS也有很大的变化，但现在它可以处理任意多的部分，而不必不断添加新的
click（）
函数


$（文档）.ready（函数（）{
$（'section'）.hide（）；
$（“.btn”）。单击（函数（）{
$（'section'）.fadeOut（'1000'）；
$（'section#'+$（this.attr（'id'））.delay（'1000'）.fadeIn（）；
});
});
/*CSS文档
html{
背景：url（green.jpg）无重复中心固定；
背景尺寸：封面；
} 
*/
身体{
字体系列：“Candara”、“Open Sans”、“Sans serif”；
}
/*闪亮按钮的css*/
.btn{
光标：指针；
利润率：10px；
文字装饰：无；
填充：10px；
字体大小：14px；
过渡：.3s；
-webkit转换：.3s；
-moz跃迁：.3s；
-o-转变：.3s；
显示：内联块；
}
.btn:悬停{
游标：url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur)，汽车；
}
.联系方式{
颜色：#000；
}
.联系人：悬停{
背景色：#ecf0f1；
颜色：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
.关于{
颜色：#000；
}
.关于：悬停{
背景色：#ecf0f1；
颜色：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
.工作{
颜色：#000；
}
.工作：悬停{
背景色：#ecf0f1；
颜色：#000；
不透明度：0.5；
过滤器：α（不透明度=50）；
}
}
.按钮{
填充顶部：30px；
文本对齐：居中；
位置：绝对位置；
顶部：50px；
左：100px；
}
标题
.副标题{
字体系列：“Wire one”；
字体大小：正常；
字号：5em；
边缘底部：15px；
文本对齐：居中；
}
.副标题{
线高：.9em；
字体大小：5.5em；
边际上限：0；
边缘底部：40px；
}
.标语{
字号：1.4em；
锂
.wrapper {
    position: relative;
}

.wrapper div {
    position: absolute; //This will position both divs one on top of the other
}

function hideAll(){
 $(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}

$(document).ready(function(){
    $(".work").click(function(){
        hideAll();
        $(".thumbnail").fadeToggle('slow');      
    });
    $(".about").click(function(){
        hideAll();
        $(".person").fadeToggle('slow');      
    });

hideAll();
});