Question

打开和关闭时，滑出菜单动画的最佳方法是什么？点击＆＃34;打开/关闭＆＃34;滑出菜单应该能够顺畅地进出动画。按钮，将身体内的所有内容推到一边。

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');
    }

});

点击＆＃34;关闭＆＃34;当前幻灯片跳转按钮，然后重新打开，不点击＆＃34;打开＆＃34;按钮。

指向当前示例的链接jsFiddle。

Answer 1

我看不出第一次出现body.animate({ right: 'menuWidth' });的必要性，所以我建议删除它。（无论如何，这一行会触发您当前拥有的唯一动画）

实际问题是你的情况。我没有弄清楚为什么你的情况不起作用，因为它似乎是正确的，但将其改为if (body.css('right')=='0px')就可以了。

最后，您必须设置正文right属性的初始值：

body{
  right: 0;
  ...
}

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

Updated fiddle

Answer 2

它似乎是你的＆＃39; body.css＆＃39; line实际上每次都将正确的值设置为0。所以，替换这一行：

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

这一行：

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

我必须赞扬其他帖子here，以便剥离“px＆＃39;检索到的css值的字符与0进行比较。

Answer 3

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

JSFiddle Demo

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

jQuery - 侧滑菜单

3 个答案: