jQueryで色を変えたり、画像を表示したい！

Question

前提・実現したいこと

初めての投稿となります。jQuery初心者です。
jQueryを使って、格闘ゲームの体力ゲージのようなものを表したいと思っています。

0＿体力ゲージは「#box」で表現しています。CSSでwidthを100pxで設定。
1＿"#btn"をクリックすると"#box"の幅が20pxずつ縮小する。
2＿"#box"のwidthが残り40pxになるとゲージがCSSオレンジ色になる。
3＿"#box"のwidthが残り20pxになるとゲージがCSS赤色になる。
4＿"#box"のwidthが0pxになると画像（"./img/finish.jpg"）が現れる。

としたいです。
下のjQueryの部分にif文（widthが40pxであれば…）
を置いていけば良いのだと思っていますが、
具体的なコードが思いつかず困っています。
ご協力のほどどうぞ宜しくお願いします！

該当のソースコード

■HTML

<div id="box"></div>
<img id="finish" src="./img/finish.jpg">

■CSS

#box{
　width:100px;
  background-color: yellow;
 }

■Javascript

$("#btn").on("click",function(){
    $("#box").width("-=20");
});
```

Comments

[s8_chu]

teratail では、マルチポストは非推奨となっています。マルチポストを行っている場合は、マルチポスト先の URL を質問文へ追記していただけませんか？

Answer 1

#box{
  width:100px;
  height:20px;
  background-color: yellow;
}

#finish {
  display: none;
}

$("#btn").on("click", function() {
    var width = $("#box").width() - 20;
    $("#box").width(width);

    if (width <= 0) {
        $("#finish").show();
    }
    else if (width <= 20) {
        $("#box").css("background-color", "red");
    }
    else if (width <= 40) {
        $("#box").css("background-color", "orange");
    }
});

Comments

[退会済みユーザー]

早速のご回答ありがとうございます。適切なコードで助かります。もう一点だけ、教えていただけますでしょうか？？
この場合、btnのon-clickで機能が動くと思いますが、単にwidthのpxを計測して、その長さで40pxなのか、20pxなのか、0pxなのかで機能を動かすことは出来ますでしょうか？？

＊実は、別のjQueryの式（random関数）を使って、自分が負けたら体力ゲージ-20pxを、自分が勝ったら相手の体力ゲージが-20pxになるように指示しております。

[naomi3]

できます。
「$("#btn").on("click",　);」を取り去り、無名関数に名前をつけ、その関数を呼び出すだけです。