jQuery，如何使元素一次通过一个动画

Question

So I am trying to make an aquarium with jquery and javascript. Right now I am trying to make a fish become bigger for two seconds and then go back to its normal size. I have encountered this problem where the fish becomes bigger for two seconds but if you during that time frame double click it again it will go back to its normal size and then immediately become twice the double size(of the initial double click). How do I fix this problem ? I want the fish to only become bigger once and then go back to normal size and if you double clicked during the time it was its double size nothing would happen.

This is the code I used to make the fish enlarge:

$("#fish1Id").dblclick(function(){
var heightNew = $(this).height() + 50;
var widthNew = $(this).width() + 50;

$(this).animate({height: heightNew, width: widthNew}, 500, shrink);


});

And shrink:

function shrink(){

$("#fish1Id").delay(2000).animate({height: redHeight, width: redWidth});

}

Answer 1

I figured it out on my own the fix I used:

 $("#fish1Id").delay(1500).animate({height: redHeight, width: redWidth},function complete(){
      $("#fish1Id").stop(true);