當其他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被點擊時淡入淡出

回答

相關問題