jquery淡入/淡出+关闭按钮

Question

这应该是网站的“团队”部分。每个圆圈代表团队的一个成员。当您单击蓝色圆圈以淡入黑色 div 时，该代码将起作用。然后您可以单击黑色 div 内的红色框以淡入所有 3 个圆圈。

但是，当您单击红色圆圈时，下一个 div 不会淡入。只有圆圈会淡出。我无法弄清楚为什么会这样。

我也被困在允许红色框（黑色 div 内）淡出任何新 div 淡入的部分。它基本上用作新 div 淡入的关闭按钮。

我希望这是有道理的。

http://jsfiddle.net/3rdculturekid/Zr3Nr/20/

$("document").ready(function () {

//fade in black div
$('#one').click(function () {
    $('#circles').fadeOut('slow', function () {
        $('#black').fadeIn('slow');
    });
});

//fade out black div
$('#x').click(function () {
    $('#black').fadeOut('slow', function () {
        $('#circles').fadeIn('slow');
    });
});

//fade in green div
$('#two').click(function () {
    $('#circles').fadeOut('slow', function () {
        $('#green').fadeIn('slow');
    });
});

});

Answer 1

您没有正确关闭您的 div 标记之一

<div id="black">
    <div id="x"></div>
</div>                <-------- this one
<div id="green">
    <div id="x"></div>
</div>

演示-->http://jsfiddle.net/Zr3Nr/21/

另外，您使用 x 作为重复 ID，这会造成问题，您可以改用类

<div id="black">
    <div class="x"></div>
</div>
<div id="green">
    <div class="x"></div>
</div>

以x 为类---> 的演示 http://jsfiddle.net/Zr3Nr/22/