jQuery - 側滑菜單

打開和關閉時滑動菜單正確動畫的最佳方法是什麼？單擊「打開/關閉」按鈕後，滑出菜單應該平滑地進出動畫，將身體內的所有內容推到一邊。jQuery - 側滑菜單

jQuery的：

var body = $('body'); 
var button = $('#button'); 
var menu = $('#menu'); 
var menuWidth = $('#menu').width(); 

menu.css({ right: -menuWidth }); 
button.html('OPEN'); 

button.on('click', function(event){ 

    event.preventDefault(); 

    body.animate({ right: 'menuWidth' }); 

    if (body.css({ right: 0 })) { 
     body.animate({ 
      right: +menuWidth 
     }, 600); 
     button.html('CLOSE'); 
    } else { 
     body.animate({ 
      right: 0 
     }, 600); 
     button.html('OPEN'); 
    } 

});

滑跳目前在單擊「關閉」按鈕，然後回來重新活躍起來開，不點擊「打開」按鈕。

指向當前示例的鏈接，jsFiddle。

來源

2014-11-05 Andrew

我看不到body.animate({ right: 'menuWidth' });第一次出現的原因，所以我建議將其刪除。（無論如何，這行會觸發你當前擁有的唯一動畫）

實際的問題是你的狀況。我沒有弄清楚爲什麼你的情況不起作用，因爲它似乎是正確的，但將它改爲if (body.css('right')=='0px')就可以了。

最後，你必須設置爲身體的right屬性的初始值：

body{ 
    right: 0; 
    ... 
}

否則，它是由瀏覽器設置爲right: auto。然後，你的第一次點擊將它設置爲0，但顯然，不會有任何可見的效果。

Updated fiddle

來源

2014-11-05 23:05:24

看來你的'body.css'行實際上是每次都將正確的值設置爲0。這條線

if (body.css({ right: 0 })) {

：所以，替換該行

if (body.css('right').replace(/[^-\d\.]/g, '') == 0) {

我必須給予信貸另一篇文章here用於剝離檢索到的CSS值的「PX」字符比較0

來源

2014-11-05 23:05:00 StratMN

如果您的瀏覽器需要支持它，一個選擇是使用CSS過渡基礎上只是改變及一流的動畫菜單：

JSFiddle Demo

#menu { 
    width: 0; 
    transition: width .6s; 
} 
#menu.open { 
    width:300px; 
}

來源

2014-11-05 23:53:32 Talmid

jQuery - 側滑菜單

回答

相關問題