removeClass（myclass），持续时间不起作用

Question

这是我运行缓慢的代码

if ($('body').hasClass('myclass')) {
  $('body').removeClass("myclass", "slow");

} else {
  $("body").addClass('myclass');
}

此侧栏菜单显示和隐藏的代码，它显示顺畅但快速关闭，如何慢慢关闭？

注意 ：这个css会起作用，但在这种情况下它无法应用。需要jquery方法。

transition-duration:1s;

任何帮助将不胜感激......

Answer 1

您需要Jquery UI来实现这一目标。 Jquery UI扩展了Jquery的removeClass，增加了速度和动画。您可以申请＆＃39; easeInBack＆＃39;例如缓和。

$('body').removeClass('myclass', 'easeInBack');

您可以在Jquery-UI文档中找到有关删除类的完整文档：http://api.jqueryui.com/removeclass/

稍后添加：

Jquery Way

如果您从未使用过Jquery UI或/并且没有期待使用它，您可以使用下面的代码实现此目的。但是身体最后会有display:none;。我认为你在代码中使用body来获得更简单的问题。我不知道你是如何使用这些东西的，但是这些代码可以帮助你理解主要想法。

$('.menu').fadeOut('slow', function(){
    $('.menu').removeClass('myclass');
});

Answer 2

如果你想显示和隐藏侧边栏并且正在通过切换一个类来实现这一点，那么这里有一个小技巧。

传统应该在永远不会删除的类上。例如：

<nav class="mymenu">
</nav>

CSS

.mymenu {
   transform: translateX(-100%);
   transition: all 0.5s;
}

.mymenu.open {
   transform: none;
}

请注意，将在jQuery / JS中添加或删除open类，但.mymenu类将始终存在。 诀窍在CSS ！

其他说明：

• jQuery removeClass()不支持延迟，您可以通过classname / Multiple classnames/ A function that evaluates to a classname。