用純JS切換div

場景：一個主容器，一個具有不透明度1的子img和一個具有不透明度0的子範圍，兩者都絕對定位在相對定位的父div上。減少img的不透明度，同時增加跨度的不透明度。當不透明度超過某個閾值時，例如分別爲0.01和0.99隱藏/顯示（display：none; display：inline-block）img/span。然後通過相反的過程顯示img並隱藏跨度。什麼是最好的解決方案（可能使用CSS3）來實現？用純JS切換div

<div id="post-cont"> 
    <img id="post-img-1" class="post-img" src="small.jpg"/> 
    <span id="post-txt-1" class="post-txt">Some text</span> 
</div>

有一些workaround with JS，但它是laggy所以我想解決這個使用CSS3和最小JS越好。

來源

2014-02-06 sitilge

什麼事件？懸停，點擊等 –

CSS懸停，JS onmouseover – sitilge

你試過嗎？ http://stackoverflow.com/questions/16546272/css-transition-fade-in-only-for-element –

CSS3只有

http://jsfiddle.net/SPmj5/7/

<div id="post-cont"> 
    <img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/> 
    <span id="post-txt-1" class="post-txt">Some text</span> 
</div> 


#post-cont { 
    position: relative; 
} 

#post-cont img, 
#post-cont span { 
    display:block; 
-o-transition: opacity .7s ease; 
    -ms-transition: opacity .7s ease; 
    -moz-transition: opacity .7s ease; 
    -webkit-transition: opacity .7s ease; 
    transition: opacity .7s ease;  
} 

#post-cont img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 1; 
} 

#post-cont span { 
    position: absolute; 
    top: 100px; 
    left: 80px; 
    opacity: 0; 
} 

#post-cont:hover img { 
    opacity: 0; 
} 

#post-cont:hover span { 
    opacity: 1; 
}

注意過渡不是在IE8/9 http://caniuse.com/#search=transition支持

來源

2014-02-06 20:55:20

這個想法是設置顯示：無; img在不透明度足夠低以便跨度可以佔用img的地方。有任何想法嗎？ – sitilge

如果他們絕對定位它真的不需要取代它（？）。你可以打破過渡屬性，並開始更接近另一個完成的跨度。 –

我會更新小提琴鏈接。 –

-1

聽起來像一些褪色對我來說！我不認爲你可以使用純CSS3對於這個..

https://api.jquery.com/fadeToggle/

來源

2014-02-06 20:55:20 httpgio

至少沒有任何褪色效果... – httpgio