同时在不同的元素上运行添加类jquery

Question

我想从左侧滑动菜单栏，同时使用CSS和jquery将页面向右滑动。我可以做滑动没有问题，但正在发生的是身体滑动左，然后一旦完成菜单滑出

JS

$('body').toggleClass('slide-left', '');
$('.mid-side-menu').toggleClass('slide-out', '');

CSS

.slide-left {
  position: fixed;
  right: 300px;
  transition: right 0.5s;
}

.slide-out {
  transition: right 0.5s;
  right: 0px;
}

如何同时运行这两个命令？

Answer 1

我认为你不能用你当前的实现完成你想要的东西。您需要为这两个项添加相同的类，但是该类根据其应用的内容采取不同的行为。

例如：

的jQuery

$('.mid-side-menu, body').toggleClass('slide-out', '');

CSS

body.slide-out {
  position: fixed;
  right: 300px;
  transition: right 0.5s;
}
.mid-side-menu.slide-out {
  transition: right 0.5s;
  right: 0px;
}