jQueryで要素の大きさ（width）に合わせて、色を変えたり、画像を表示したい！

jQueryを使って、格闘ゲームの体力ゲージを表したいと思っています。

1. 体力ゲージは「#box」で表現。CSSでwidthを100pxで設定。
2. "#btn"をクリックすると"#box"の幅が20pxずつ縮小する。
3. "#box"のwidthが残り40pxになるとゲージがCSSオレンジ色になる。
4. "#box"のwidthが残り20pxになるとゲージがCSS赤色になる。
5. "#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であれば…のように）
を置いていけば良いのだと思っていますが、
具体的なコードが思いつかず困っています。
ご協力のほどどうぞ宜しくお願いします！