Javascript jquery动画以一种方式工作，但不能以另一种方式工作？

我有这个过渡到幻灯片侧边栏菜单进出。当它从禁用变为激活时，它似乎只在第一次单击时起作用。但在离开的过程中，它只是跳回原处，没有过渡。有什么建议吗

if (sideMenu.hasClass('is-disabled')) {
    console.log('working 2');
    sideMenu.removeClass('is-disabled');
    sideMenu.addClass('is-active');
    sideMenu.animate({
        right: "0"
    }, 1000, function() {
        // Animation complete.
    });
}
else if (sideMenu.hasClass('is-active')){
    console.log('working 3');
    sideMenu.removeClass('is-active');
    sideMenu.addClass('is-disabled');
    sideMenu.animate({
        right: "-300px"
    }, 1000, function() {
        // Animation complete.
    });
}

我不知道如何在JSFIDLE中进行复制，因为我正在ember.js上构建它，但这里有一个链接，您可以更好地看到js/css/html

尝试添加

   return false;

---

在每个if语句的末尾

找出了问题所在愚蠢的错误

---

已禁用的类显示：无；因此，它将在效果发生之前消失：无；问题解决了

你能发布最小的HTML、CSS、JS来重现你的问题吗？我添加了一个到JSFIDLE的链接，这样你就可以看到代码，但无法在jsfiddle上复制它。在jsfiddle中它似乎工作得很好。你可以在jsfiddle中看到右侧幻灯片上的侧菜单？我只看到菜单栏按钮，但单击时什么也没有发生。event.prventDefault将是一个更好的方法查看您的代码，您还需要使用clearQueue清除以前的事件，或者在快速多次单击时，您的代码将为每个事件运行动画。