jquery - 单击其他 Div 时将 Div 淡化为可见/隐藏

Question

当单击其他三个 Div 之一时，如何使 Div 在隐藏或可见之间变化。

例如，

CSS

#red_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:50px;
 background-color:red;   
}

#green_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:150px;
 background-color:green;    
}

#yellow_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:150px;
 background-color:yellow;    
}

#blue_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:50px;
 background-color:blue;    
}

HTML

<div id="red_box"></div>
<div id="yellow_box"></div>
<div id="green_box"></div>
<div id="blue_box"></div>

我希望在单击任何其他框时切换红色框的可见性。因此，例如，如果用户单击黄色框，红色框将消失，然后如果他们单击绿色框，它将重新出现。但是我需要它，以便他们可以按任何顺序单击这些框，每次单击一个框时，它都会使红色框可见或隐藏它，具体取决于它是否已经隐藏或可见。

我希望这是有道理的。

我也很好奇如何用淡入淡出效果做到这一点，所以红色框不会消失或出现，而是会慢慢淡入或淡出。

这是一个JSFiddle上面的代码。

我不确定这是否可以仅通过 CSS 实现，或者是否可以/应该使用 JQuery 实现。我也不确定它是否会使用不透明度或显示:无；标签，或两者都没有，或两者兼而有之。

谁能帮帮我？

Answer 1

你可以在下面使用jquery

然后在其他三个div(黄色，绿色，蓝色)中添加一些类

$('.some').click(function(){
    $("#red_box").fadeToggle();
});

所以你的 html 将是

<div id="red_box"></div>
<div id="yellow_box" class="some"></div>
<div id="green_box" class="some"></div>
<div id="blue_box" class="some"></div>