CSS3 transitions点击图片渐入渐出效果实例页面

JS代码：

(function() {
    var oImage = document.getElementById("testBox").getElementsByTagName("img");
    oImage[0].onclick = function() {
        var cl = this.className;
        if (/click/.test(cl)) {
            this.className = "trans_fade_image";
        } else {
            this.className = "trans_fade_image trans_fade_image_click";
        }	
    };
})();
                

CSS代码：

.trans_fade_image {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.trans_fade_image_click {
    opacity:0;
    filter: alpha(opacity=0);
}
                

HTML代码：

<div id="testBox" class="demo">
    <img class="trans_fade_image" src="//image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img src="//image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>