jQueryを使って、格闘ゲームの体力ゲージを表したいと思っています。
- 体力ゲージは「#box」で表現。CSSでwidthを100pxで設定。
- "#btn"をクリックすると"#box"の幅が20pxずつ縮小する。
- "#box"のwidthが残り40pxになるとゲージがCSSオレンジ色になる。
- "#box"のwidthが残り20pxになるとゲージがCSS赤色になる。
- "#box"のwidthが0pxになると画像("./img/finish.jpg")が現れる。
としたいです。
$("#btn").on("click",function(){
$("#box").width("-=20");
});
#box{
background-color: yellow;
}
<div id="box"></div>
<img id="finish" src="./img/finish.jpg">
上段のjQueryの部分にif文(width>40pxであれば…のように)
を置いていけば良いのだと思っていますが、
具体的なコードが思いつかず困っています。
ご協力のほどどうぞ宜しくお願いします!