jquery show timeout countdown output

Question

So I have this code to hide certain div's, and I want to add to the html code the seconds that the div is closing in, ex: 5,4,3,2,1, (closed);

Here is the code:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var isVisible;
        var cvr = $("#cover");
        var dlg = $("#dialog");
        isVisibleCvr = cvr.is(":visible");
        isVisibleDlg = dlg.is(":visible");
        if(isVisibleCvr && isVisibleDlg == true){
            setTimeout(function() {
                cvr.hide();
                dlg.hide();
            }, 5000);
        }
    });
</script>

Any sugestions?

Answer 1

A solution :

 jQuery(document).ready(function () {
    var cvr = $("#cover");
    var dlg = $("#dialog");
    var t = 5;
    isVisibleCvr = cvr.is(":visible");
    isVisibleDlg = dlg.is(":visible");
    if(isVisibleCvr && isVisibleDlg == true){
        (function countDown(){
            if (t--) {
               $('#t').text(t + ' s');
               setTimeout(countDown, 1000);
            } else {
               $('#t').text('gone!');
               cvr.add(dlg).hide();
            }
        })();
    }
});

I think the code is self explaining. If not, ask for clarification.

Demonstration

Answer 2

You can use the setInterval function, use the following script: (demo)

<script type="text/javascript">
 jQuery(document).ready(function () {

  var counter = 5;
  var interval = setInterval(function() {
      counter--;
      jQuery("#number").html(counter);
      if (counter == 0) {
        //Do something
        jQuery("#number").html("Countdown ended!");
        // Stop the counter
        clearInterval(interval);
      }
  }, 1000);

 });
 </script>

and the following div:

<div id="number">5</div>

Check out the live demo on jsFiddle: http://jsfiddle.net/RtFKr/