Max-height not working properly in mozilla and chrome

[pravin rasal]

Hello everyone

My problem I want to set right fill div which is in bold to set max-height to 98 pixel I create one line code in j query which is

$("#right fill").animate({height:"+=78px", top:"-=78px"},7.5);

This is the animation of div when i click on ON button the div increases 20 px to 98 px but when I again click on button this will again increase the height of div
I want to stop after double clicking on button this div will not increase again ...

and this is my html code :

<div id = "jarright">
					<img src = "images/jar2.png"/>
					<div id="connectRight" style="position: absolute; left: 532px; top: 660px; height: 21px; width: 18px;"></div>
					[b]<div id="rightFill" style="position: absolute; left: 500px; top: 738px; max-height: 98px; height: 20px; width: 86px; background-color: red; opacity:0.3; -moz-border-radius-bottomright: 26px; border-bottom-right-radius: 26px; -moz-border-radius-bottomleft: 26px; border-bottom-left-radius: 25px; "></div>
					[/b]
					<label for="jarright" style="font-weight:bold; position: absolute; top: 766px; left:520px;">Dialysate<br/>(Normal range is 350-800 ml/Min)</label>
				</div>