Issue with jQuery countdown timer

Question

I'm working with timers when I click the button timer starts from 5 seconds and fadesout when it comes to 0. I tried but couldnt get , here is the fiddle I've tried: http://jsfiddle.net/GNrUM/937/

<div id="hideMsg" style="display:none;">
This Box will Close In <span>5</span> Seconds..</div>
<input id="take" type="button"  value="click me" >

jQuery code :

$("#take").live("click", function () {
    $('#hideMsg').show();
    var sec = $('#hideMsg span').text()
    var timer = setInterval(function () {
        $('#hideMsg span').text(--sec);
        if (sec == 0) {
            $('#hideMsg').fadeOut('fast');
            clearInterval(timer);
        }
    }, 1000);
});

It's working good for first click, when click 2 time count starts from 0,-1,-2,. It does not clear the intervals. any help?

try to re-initialize $('#hideMsg span') . like $('#hideMsg span').text('5'); jsfiddle.net/GNrUM/941 — Moorthy GK
– Moorthy GK, Commented Feb 6, 2014 at 7:43

Moorthy GK · Accepted Answer · 2014-02-06 07:46:25Z

1

try to re-initialize $('#hideMsg span') . like $('#hideMsg span').text('5');

http://jsfiddle.net/GNrUM/941

answered Feb 6, 2014 at 7:46

Moorthy GK

1,3019 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaik Mahaboob Basha · Accepted Answer · 2014-02-06 07:45:45Z

1

you have to reset the value once it fades out

 $('#hideMsg span').text(5);

JS Fiddle Demo demo

answered Feb 6, 2014 at 7:45

Shaik Mahaboob Basha

1,0825 silver badges15 bronze badges

Comments

witherwind · Accepted Answer · 2014-02-06 07:45:08Z

0

Try this:

 $("#take").live("click",function(){  
    $('#hideMsg').show();    
    var sec = $('#hideMsg span').text()
    var timer = setInterval(function() { 
       $('#hideMsg span').text(--sec);
       if (sec == 0) {
          $('#hideMsg').fadeOut('fast');
           $('#hideMsg span').text("5"); // reinitialize the span value
          clearInterval(timer);
       } 
    }, 1000);
    });

answered Feb 6, 2014 at 7:45

witherwind

4723 silver badges15 bronze badges

1 Comment

Satpal Over a year ago

Better to do in callback method of fadeout. like $('#hideMsg').fadeOut('fast',function(){ $('#hideMsg span').text(5); });

Collectives™ on Stack Overflow

Issue with jQuery countdown timer

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related