jquery - クリック時に画像のサイズを切り替えます

Question

クラスの製品で高さ250ピクセルの画像リストがあります。

画像をクリックすると、500 px になる必要があります。
画像をもう一度クリックすると、250px に戻る必要があります。
もう一度クリックすると、500 px になる必要があります。

基本的に、画像の高さを切り替えたいと思います。

私が持っているもの。

<script>
 $(document).ready(function(){
       
       $('.product').click(function()
       {
    
          $(this).css("cursor","pointer");
          $(this).animate({height: "500px"}, 'fast');
       });
     
     $('.product').dblclick(function()
       {
    
          $(this).css("cursor","pointer");
          $(this).animate({height: "250px"}, 'fast');
       });

   });
</script>

これにより、シングルクリックで画像が大きくなり、ダブルクリックで小さくなります。

しかし、画像が500pxのときにダブルクリックアクションを実行したい.

500px のすべての画像は、別の画像をクリックすると再び 250 になる必要があるため、500px の画像は 1 つだけになります。

これを達成するための最良の方法は何ですか？if else ステートメント、または高さを切り替えることは可能ですか?