滑动 div [关闭]

【问题标题】：Sliding the div [closed]滑动 div [关闭]
【发布时间】：2011-03-13 19:34:45
【问题描述】：

我有一个 div，里面有一些东西。一开始它的宽度设置为0；（所以它看起来不可见），但我想有一个链接，然后有一个 javascript/jQuery 使该 div “滑动”到宽度为 100px。我该怎么做？

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

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

谢谢

【问题讨论】：

看过 jQuery UI 吗？

标签： javascript jquery html css

【解决方案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

【讨论】：

完美。正是我想要的。谢谢！

【解决方案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>

【讨论】：