用纯JS切换divs

Question

场景：一个主要容器，一个具有不透明度1的孩子IMG和一个具有不透明度0的子跨度，两个绝对定位于相对定位的父级div。降低IMG的不透明度并同时增加跨度的不透明度。当不透明度超过一定的阈值时，例如0.01和0.99 hide/show（显示：无;显示：内联块）分别为IMG/跨度。然后是显示IMG并隐藏跨度的反向过程。最好的解决方案（可能使用CSS3）是什么？

<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>

在JS方面有一些解决方法，但它很糟糕，因此我想使用CSS3和尽可能最小的JS解决此问题。

Answer 1

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

Answer 2

听起来像是我的一些fadetoggle！我认为您不能为此使用纯CSS3 ..

https://api.jquery.com/fadetoggle/