jQuery - 側滑菜單

Question

在打開和關閉時讓滑出菜單正確動畫的最佳方法是什么？ 單擊“打開/關閉”按鈕時，滑出菜單應平滑地進出動畫，將正文中的所有內容推到一邊。

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 的鏈接。

Answer 1

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

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

最后，您必須為 body 的right屬性設置初始值：

body{
  right: 0;
  ...
}

否則，瀏覽器將其設置為right: auto 。 然后，您的第一次單擊會將其設置為 0，但顯然不會產生任何可見效果。

更新的小提琴

Answer 2

看來您的“body.css”行實際上每次都將正確的值設置為 0。 所以，替換這一行：

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

用這一行：

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

我必須感謝這里的另一篇文章，因為它去除了檢索到的 css 值的“px”字符以與 0 進行比較。

Answer 3

如果您的瀏覽器要求支持它，一種選擇是使用 CSS 轉換根據僅更改其類來為菜單設置動畫：

JSFiddle 演示

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