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/

jquery淡入/淡出+关闭按钮

1 个答案: