javascript - 如何在 Javascript 中使用幻灯片显示/隐藏 div(不使用 jQuery)

Question

如何在 Javascript 中从左到右滑动显示/隐藏 div (不使用 jQuery)

这是我需要的示例(在 jQuery 中):http://jsfiddle.net/dRpWv/1/

<小时/>

这是我在 jQuery 中需要的示例源:

<a href="#" id="button" class="button_style">Show content</a>
<div id="hidden_content">Content</div>

<script>
$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Hide Content');
    }, function() {
        $(this).text('show Content');
    }).click(function(){
        $("#hidden_content").slideToggle("slow");
    });
});
</script>

Answer 1

http://jsfiddle.net/dRpWv/665/

给你。使用 CSS3 transition 平滑地为幻灯片设置动画(我可能会补充说，比 jQuery 能够管理的更平滑)。

由于 display 不可转换，因此它使用 height 代替 overflow:hidden (我认为这就是 jQuery 在内部的做法) 。使用 scrollHeight 确定目标高度。