使用jQuery滑动画布/视口导航

Question

我正在尝试制作一个离开画布的导航，从左侧滑入以占据页面的20％，而内容向左滑动（其中一些将在画布外）占据页面的80％ 。 这已经出现在谷歌的移动网站和Facebook的移动应用程序中。

以下是使用CSS3 Transitions的版本：http://codepen.io/chriscoyier/pen/umEgv

除此之外，我正在努力创建一个仅依赖于JQuery / Javascript而不依赖于CSS Transitions的文件。

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

我不明白为什么它不起作用。每次切换＃main-nav的宽度。单击菜单按钮;从而创造出一种正确的滑动效果。

有人可以帮我解决这个问题和/或帮助我解决这个问题。

以下是我目前的情况：http://pastebin.com/0X7uT7tC

Answer 1

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

HERE IS FIDDLE

<强>的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;
}