如何使用javascript允许多个滑动框

试图编辑这个javascript和页面，这样当我按下一个按钮时，两个滑出会同时发生，一个在另一个后面滑出两倍的距离。有点像滑动门。例如，如果你去墨尔本，我想让两扇窗户滑出，而不是一扇。您可以看到，我已经在哪里用黑盒破坏了代码，并添加了冗余javascript。最终，它将被用作显示表单选项/导航的漂亮方式。不过，我很难想出如何同时制作两张幻灯片。这是密码。有什么帮助吗

---

我很难理解你想做什么，但是如果你想让两个元素滑动，为什么不创建两个背景颜色不同的div呢？然后单击可以为它们指定一个类来设置动画，或者使用jQuery设置动画。这将是一个简单的问题，让一个元素以比另一个元素慢的速度滑动，让它落后

//JAVASCRIPT
$('.w3c a').click(function (){
$('#yourElement').addClass('animate');
$('#your2ndElement').addClass('animateSlow');
});

/CSS
#yourElement, #your2ndElement{
position: absolute;
right: 1000px;
}

.animate{
animation: slide 1s linear;
}

.animateSlow{
animation: slide 2s linear;
}

@keyframes slide{
transform: translate(-2000px);
}

---

不要忘记关键帧上的供应商前缀

这就是我在这里所做的：这基本上就是我想要的。问题是这是否是最有效的方法。你的看起来很简单，但我很难控制它是如何滑入滑出的。@JustinC我更喜欢CSS动画，因为我通常发现它的性能比jQuery动画好。您可能需要做一些数学计算或尝试/错误来计算每个框应该滑动多长时间。

//JAVASCRIPT
$('.w3c a').click(function (){
$('#yourElement').addClass('animate');
$('#your2ndElement').addClass('animateSlow');
});

/CSS
#yourElement, #your2ndElement{
position: absolute;
right: 1000px;
}

.animate{
animation: slide 1s linear;
}

.animateSlow{
animation: slide 2s linear;
}

@keyframes slide{
transform: translate(-2000px);
}