带jQuery的画布外/视口导航幻灯片

Question

我正在尝试做一个画布外的导航，从左边滑进来占据页面的20%，而内容滑到左边(其中一些将离开画布)占据页面的80%。这已经在谷歌的移动网站和Facebook的移动应用程序中看到了。

这是一个使用CSS3转换的版本：http://codepen.io/chriscoyier/pen/umEgv

除了，我试图使一个只依赖于JQuery / Javascript，而不是CSS的过渡。

下面是我到目前为止的链接。

我不明白为什么它不能工作。每次点击菜单按钮时，都应该切换#main-nav的宽度；这样就产生了向右滑动的效果。

有没有人可以帮我解决这个问题和/或帮助我实现我想要实现的目标？

这就是我到目前为止所拥有的：http://pastebin.com/0X7uT7tC

Answer 1

在css中将宽度更改为20%，然后在加载时将其隐藏。

jQuery

 $('#main-nav').hide();
 $('.menu-button').click(function () {
     $('#main-nav').animate({
         width: 'toggle'
     });
 });

CSS

    .main-nav {
    position: fixed;
    top: 0;
    width: 20%;
    height: 100%;
    background: #3B3B3B;
    overflow: hidden;
}