翻譯使用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（）來允許多個前綴，但運氣更少。

我不知道如果我誤解了如何變換性質的作品。我試着讀了進去，但我可以發現，大部分的例子都與懸停在一個元素，使它動畫，而不是在另一個掣子元件上的操縱。

在此先感謝您的幫助！

來源

2012-12-18 user1380540

我確實缺少一個過渡時間！

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瞧！

來源

2012-12-19 20:07:59 user1380540

翻譯使用jQuery和CSS3

回答

相關問題