当其他Div被点击时淡入淡出

当点击其他三个Div时，我将如何在隐藏或可见之间进行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来完成。我也不确定它是使用不透明还是显示：无;标记或者两者都不是，或者两者兼有

任何人都可以帮助我吗？

来源

2012-01-31 Flickdraw

它可以通过CSS3实现，请注意浏览器兼容性的限制，但你仍然想要使用几行直线javascript。（用CSS转换样式，用onclick javascript触发转换。）如果你打算为其他原因包含jquery库，那么你可以使用它 - 显然人们仍然使用IE8 ...如果你不这样做包括jquery，然后不要陷入你的网站，只是牺牲n00b浏览器的眼睛糖果。 – lpd 2012-01-31 13:07:06

您可以使用下面的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>

来源

2012-01-31 13:01:16

假设我已经正确地理解了你，每当其他任何盒子被点击时，你想淡入/淡出红框。如果这是正确的，你可以使用fadeToggle：

$("div").not("#red_box").click(function() { 
    $("#red_box").fadeToggle(); 
});

这里是一个update fiddle。

如果您不关心淡入淡出效果，则可以使用正常的toggle方法。

来源

2012-01-31 12:59:51

像这样的东西或许：

$("div").on('click', function() { 
    if (this.id != "red_box") { 
     $('#red_box').fadeToggle(200); 
    } 
});

fiddle

来源

2012-01-31 13:03:29 adeneo

你不能 - 据我所知 - 只能使用CSS淡化任何东西。用户交互也非常有限（:hover和:focus）。你将需要Javascript。

好消息是它非常简单。只需添加一个类应切换红色框的div，并添加下面的JavaScript，使他们拨动它：http://jsfiddle.net/J2uzU/

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

来源

2012-01-31 13:05:25 Supr

当其他Div被点击时淡入淡出

回答

相关问题