javascript - 单击按钮，侧边菜单从隐藏状态滑出

Question

我想制作一个类似 m.facebook.com 所做的导航菜单。 但是，我想让它从网站左侧很好地动画滑出。

流程:: 单击按钮>(菜单默认隐藏)菜单滑出，将主容器向右推一点以适合菜单>再次单击>菜单滑入并再次隐藏。

当我刚接触 Web 开发并且有太多有效的脚本语言时，我不知道如何使用 javascript、jquery 或 ajax 来实现它。我可以知道如何实现这个完美的平滑度吗？

Answer 1

沿着这些思路...... http://jsfiddle.net/HfdXY/

HTML:

<div id="menu">Menu</div>

<button id="openMenu">Toggle menu</button>​

CSS:

#menu {
    height: 300px;
    width: 0px;
    border: 1px solid black;
    display: none;
}​

JS:

$("#openMenu").click(function() {
    var menu = $("#menu");
    if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
    } else {
        $(menu).show().animate({width: 100}, 1000);           
    }
});​