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 。
我看不出需要body.animate({ right: 'menuWidth' });的原因body.animate({ right: 'menuWidth' }); 在它的第一次出现，所以我建议删除它。 （无论如何，这一行会触发您当前拥有的唯一动画）
实际问题是你的情况。 我没弄清楚为什么你的情况不起作用，因为它似乎是正确的，但改为if (body.css('right')=='0px')就可以了。
最后，您必须设置正文属性的初始值：
body{ right: 0; ... }
否则，它被设置为right: auto浏览器right: auto 。 然后，您的第一次单击将其设置为0但显然，将没有任何可见的效果。
更新小提琴
看来你的’body.css’行实际上每次都将正确的值设置为0。 所以，替换这一行：
if (body.css({ right: 0 })) {
用这一行：
if (body.css('right').replace(/[^-\d\.]/g, '') == 0) {
我必须赞扬这里的另一篇文章，用于删除检索到的css值的’px’字符，以便与0进行比较。
如果您的浏览器要求支持它，一个选项是使用CSS转换基于仅更改其类来为菜单设置动画：
JSFiddle演示
#menu { width: 0; transition: width .6s; } #menu.open { width:300px; }