滑动div

Question

我有一个div，里面有一些东西。在开始时，其宽度设置为0; （所以它看起来不可见），但我想有一个链接，然后有一个javascript / jQuery使该div“幻灯片”宽度约100px。我怎么能这样做？

我没有“得到”我见过的手风琴示例，因为它太涉及我想要做的事情。

有人可以帮帮我吗？任何帮助表示赞赏！

谢谢

Answer 1

这是你要找的吗？ ：http://jsfiddle.net/k45zb/

使用jQuery的animate()方法来增加宽度。您可以根据自己的喜好更改持续时间。

#thediv {
    width: 0px;
    background:red;
}

<div id='thediv'>
    some content
</div>

$(document).ready(function(){
    $('#thediv').animate({'width': '100px'}, 3000);
});

http://api.jquery.com/animate

Answer 2

垂直滑动（使用slideToggle功能切换div）

<script>

$(function(){

    $('.hidden').hide();

    $('#toggle').click(

        function (){
            $('.hidden').slideToggle();
        }
    )

});

</script>

<div class="hidden">This is you div</div>
<a href="#" id="toggle">toggle</a>