Jqueryについて、クラスによって値を変えていき、かつ見やすいコードにしたい

Question

前提

javascriptにてアニメーションのあるサイト作りを行っています。
Jqueryを使っているのですが、無駄が多いコードを書いている気がするので、
なんとか短くまとめたく、質問させていただきます。

コード

    <div class=a></div>
    <div class=b></div>
    <div class=c></div>
･･･

.a { height: 0; }
.b { height: 0; }
.c { height: 0; }
･･･

  $('a').animate({
    'height' : '100vh'},{ duration: 1500} );
  $('b').delay(200).animate({
    'height' : '100vh'},{ duration: 1500} );
  $('c').delay(400).animate({
    'height' : '100vh'},{ duration: 1500} );
･･･

質問内容

JSにて各クラスがアニメーションを行うコードを書いているのですが、
.delay()を使い、タイミングを200ずつずらしてアニメーションさせたいと思っています。
しかしアニメーションさせたいクラスが20個ほどあり、一つ一つ書いていくととても見づらいコードになってしまいます。
これに関してもう少し簡略化した書き方はないでしょうか？ご教示願います。

Answer 1

こんな感じでしょうか。

  $.each([ '.a', '.b', '.c' ], function( index, value ) {
 	 $( value ).delay( index * 800 ).animate( { 'height': '30vh' }, { duration: 1500 } );
  }); // サンプル用に数値を変更しています
```**動くサンプル：**[https://jsfiddle.net/Lgo536m8/](https://jsfiddle.net/Lgo536m8/)

---

【jQuery.each() | jQuery API Documentation】
[https://api.jquery.com/jQuery.each/](https://api.jquery.com/jQuery.each/)

Comments

[GoMaSio]

解決致しました！
クラスのまとめ方や値の変更の仕方も分かり、しかもサンプルまで作成いただきとても助かりました！
ありがとうございます！