前提
このコードの作動原理が分からなくて困っています。
最初、このアニメーションを見た時、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 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/08 13:41