CSS3 transition实现与收起的正统slide效果演示实例页面

CSS代码：
.box {
    width: 400px; padding: 15px;  background-color: #f0f3f9;
}
.container {
    height: 0; position: relative;  overflow: hidden;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    -o-transition: height 0.6s;
    transition: height 0.6s;
}
.container img { 
    position: absolute;  bottom: 0;
}
HTML代码：
<p>想看美女图片？<a href="javascript:" id="button">点击我</a></p>
<div id="more" class="container">
    <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
</div>
JS代码：
(function() {
    var eleBtn = document.getElementById("button"),
        eleMore = document.getElementById("more");
   
    var display = false;
   
    eleBtn.onclick = function() {
        display = !display;
        eleMore.style.height = display? "192px": "0px"
        return false;
    };
})();