翻译使用jQuery和CSS3

问题描述：

我试图模仿上http://mashable.com/可爱的手机菜单实施方案（减少浏览器的宽度上看到左上角的菜单按钮，然后点击它）单击另一个DIV。翻译使用jQuery和CSS3

基本上，我有一个按钮（＃滑动菜单）。剩下的页面内容被封装在'#nudge'div中，当点击按钮时，我想向右滑动250像素。

jQuery('#slide-menu').click(function() { 
     jQuery('#nudge').css('-webkit-transform', 'translate(250px, 0)'); 
     jQuery('#mobile-menu').css('display', 'block'); 
    });

＃手机菜单包含从屏幕左侧弹出的导航。此代码有效，但没有平滑过渡。内容刚刚弹出到右侧并出现菜单，但没有任何延迟，可以在mashable上进行平滑滑动。我也尝试切换类而不是使用.css（）来允许多个前缀，但运气更少。

我不知道如果我误解了如何变换性质的作品。我试着读了进去，但我可以发现，大部分的例子都与悬停在一个元素，使它动画，而不是在另一个掣子元件上的操纵。

在此先感谢您的帮助！

答

我确实缺少一个过渡时间！

jQuery('#slide-menu').click(function() { 
     jQuery('#nudge').toggleClass('slide-menu'); 
    });

和CSS：

.slide-menu{ 
    transform: translate(180px, 0); 
    -ms-transform: translate(180px, 0); 
    -moz-transform: translate(180px, 0); 
    -webkit-transform: translate(180px, 0); 
    -o-transform: translate(180px, 0); 
    -webkit-transition-duration: 1s; 
}

的Et瞧！

翻译使用jQuery和CSS3

相关推荐