棒グラフが下から上に伸びるアニメーションの仕掛けについて

前提

このコードの作動原理が分からなくて困っています。

最初、このアニメーションを見た時、slideUp()メソッドを使って
金色のバー（縦長長方形を表すdiv要素）が、下から上に伸びる処理が
施されているのかと思いましたが、コードにはslideDown(300)が使われています。
実際には、「backgroundColor : 'gold', display : 'none'」により、
背景が金色の領域を無色（何も表示しない）が上から下に向けて
伸びて行く処理が施されているのでしょうか。

完全に私の見当違いかもしれませんが、よろしくお願い致します。
「改訂新版jQuery本格入門 P283リスト6-43」より
コードは私が編集を加えました。

解説には以下のような説明がなされています。
(1). バーが伸びるアニメーションを開始するタイミングは
要素ごとにランダムにずらしている。
(2). (1)故に、どのバーが最後に伸びるかは不明確となる。
(3). Promiseオブジェクトにより、適切に処理される。
(4). もしalertの処理をslideDownのオプションで登録してしまうと、
バーの数だけalertが表示されてしまう。

jQuery
1  // グラフのバーを順次伸ばしていき、すべてのバーが伸び終えたら通知する
2  let radian = 0,
3      step   = 36;
4
5  const MAX_HEIGHT = $(window).height() * 0.9,
6        MAX_WIDTH  = $(window).width()  * 0.98,
7        BAR_WIDTH  = MAX_WIDTH / step,
8        RAD_STEP   = Math.PI   / step;
9
10  // グラフが描画される領域
11  const graph = $('<div>', {
12    height : MAX_HEIGHT,
13    width  : MAX_WIDTH,
14    offset : {
15      left : 0,
16      top  : 0
17    }
18  }).appendTo(document.body);
19
20  // バーのCSS設定の初期値
21  const css = {
22    backgroundColor : 'gold',
23    bottom          : 0,
24    display         : 'none',
25    position        : 'absolute',
26    width           : BAR_WIDTH
27  };
28
29  // グラフ内にバーを描画
30  while (step--) {
31    const height = MAX_HEIGHT * Math.sin(radian);
32    $('<div>', {
33      css : $.extend({
34        height : height,
35        right  : BAR_WIDTH * (step + 1)
36      }, css),
37      class : 'bar'
38    }).appendTo(graph);
39    radian += RAD_STEP;
40  }
41
42  // グラフのバーを順次表示し、完了したら通知
43  $('.bar').each(function() {
44    $(this)
45      .delay(1000 * Math.random())
46      .slideDown(300);
47  }).promise()
48    .done(function() {  // thisはjQueryオブジェクト
49      alert(`${ this.length }のバーでグラフを描画しました`);
50  });