グラフの表示をやりましょう
その前にgoogleの検証ツールの下・右切り替えはここ。
①bodyにid graphを作り、cssで縦横を指定
#graph{
width: 500px;
height: 50px;
background: #c00;
}
この横幅を伸縮するとグラフが表現できる
②bodyにid btnのボタンを作る
初期状態は横幅0
ボタンを押したときに長さが出るようにしたい
③jsでボタン動作を予約
またid名なのに#を付け忘れた。そういう癖なので気をつけなさいよ。
$('#btn').on('click',function(){//またidの#を付け忘れた
console.log('hoge');
});
④アニメーションメソッドを使ってアニメでグラフが伸びていくようにしたい
→graphというidがwidth100になればいい。
・aninmetionの中身はオブジェクトで渡そう
・オブジェクトだから中かっこ
・pxがついているので500pxはシングルコートで囲んで指示
⑤もう一回閉じる（初期化する）ボタンを作ろう
//リセットボタン
$('#rst').on('click',function(){
console.log('foo');
$('#rst').animate({'width':'0px'});//間違えたけど面白い
$('#graph').animate({'width':'0px'});//要素もシングルコートで囲む
});
animateがボタンにも効くとはおもわなかった。
