I am a .NET WEB APPLICATION DEVELOPER... 

I just started using JQUERY and liked it so much. I developed an asp.net page and used some jquery code on it.

Shortly, I put a timer bar with 900px width. I use an animate function. Function adds 5px every second and if width of the bar exceeds 895px, timer stops and width gets 0px.

You will find the code below. 

The problem is if I minimize or open another window while timer works, width of the bar exceeds the 895px but timer does not stop.

I could not find the solution. I need your support.

Thanks in advance for your supports.

Regards,

2. $(document).ready(function() {
3. var myTimer = null;
4. var myParamKrono = 1;
5. }
6. 
   
7.  if (myParamKrono == 1) {
8.                         myTimer = setInterval(timerFonks, 1000);
9.  }
10. 
    
12. //TIMER FUNCTION
13.         function timerFonks() {
14.             var myWidth = $("#Bar").width();
15.             //alert(myWidth);
16.             $("#Bar").animate({ width: '+=5px' }, "slow", function() {
17.                 
18.                 if (myWidth < 300) {
19.                     $("#Bar").css("background-color", "blue");
20.                 } else if (myWidth < 600) {
21.                     $("#Bar").css("background-color", "yellow");
22.                 } else if (myWidth < 895) {
23.                     $("#Bar").css("background-color", "red");
24.                 } else {
25.                     clearInterval(myTimer);
26.                     $("#Bar").animate({ width: '0px' });
27.                 };
28.             });
29.         };