jQuery - 侧滑菜单答案

【问题标题】：jQuery - Side Sliding MenujQuery - 侧滑菜单
【发布时间】：2015-01-02 07:24:58
【问题描述】：

在打开和关闭时让滑出菜单正确动画的最佳方法是什么？单击“打开/关闭”按钮，将正文中的所有内容推到一边，滑出菜单应平滑地进出动画。

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。

【问题讨论】：

标签： jquery css

【解决方案1】：

我看不出第一次出现body.animate({ right: 'menuWidth' }); 的原因，所以我建议删除它。（无论如何，这条线会触发你目前拥有的唯一一个动画）

真正的问题是你的条件。我不明白为什么您的条件不起作用，因为它似乎是正确的，但将其更改为 if (body.css('right')=='0px') 就可以了。

最后，你必须为body的right属性设置初始值：

body{
  right: 0;
  ...
}

否则，浏览器会将其设置为right: auto。然后，您的第一次点击会将其设置为 0，但显然不会有任何可见的效果。

Updated fiddle

【讨论】：

【解决方案2】：

看来您的“body.css”行实际上每次都将正确的值设置为 0。所以，替换这一行：

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

用这一行：

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

我必须感谢另一个帖子 here 剥离检索到的 css 值的“px”字符以与 0 进行比较。

【讨论】：

【解决方案3】：

如果您的浏览器要求支持它，一种选择是使用 CSS 过渡来基于仅更改其类来为菜单设置动画：

JSFiddle Demo

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

【讨论】：