同時運行在不同元素上添加類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; 
}