javascript - 同时在不同元素上运行添加类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;
}