Javascript 按顺序向上滑动元素

需要依次滑动元素，一个接一个，而不是异步

block2

应在

block1

关闭时开始滑动

block3

应在

block2

关闭时开始滑动

等等。实际上，我有很多这样的元素，所以任何嵌套语法（函数中的函数）都不合适

我希望

asyncwait

是正确的方法，但不能完全理解

以下是我的尝试：

$（'button'）。在（'click'，function（）上{
全部关闭（）；
});
异步函数close_all（）{
等待关闭1（）；
等待关闭2（）；
等待关闭3（）；
}
函数close1（）{
$（“#块1”）.slideUp（）；
}
函数close2（）{
$（'#block2'）。slideUp（）；
}
函数close3（）{
$（“#块3”）.slideUp（）；
}

.block{
显示：内联块；
宽度：14%；
背景：金；
利润率：0.9px；
}
#区块1{
高度：54px；
}
#区块2{
高度：25px；
}
#区块3{
高度：72px；
}

第一区
第2区
第3区
单击

一种方法可以是在方法上使用

on complete

回调：

$（'button'）。在（'click'，function（）上
{
全部关闭（$（“.block”）；
});
函数close_all（元素，idx=0）
{
if（idx>=elements.length）
返回；
让cb=（）=>关闭所有（元素，idx+1）；
元素.eq（idx）.slideUp（2000，cb）；
}

.block{
浮动：左；
宽度：14%；
背景：金；
利润率：0.9px；
}
#区块1{
高度：54px；
}
#区块2{
高度：25px；
}
#区块3{
高度：72px；
}

第一区
第2区
第3区
单击

I have update with generic approach，如果我找到了一种方法来使用

await

和

async进行更新，我将再次更新。更好的是，但是刚刚开始的跳跃是什么click@qadenza这与
display:inlineblock
CSS属性有关。对于类似的布局，我将其更改为
foat:left
。但是，我无法解释与使用
display:inline block
@qadenza相关的问题。我还就这个问题提出了一个问题：