title: How do I cause an animation every 5 seconds using jQuery?
body: <p>Okay so I don't have much experience with jQuery. What I'm trying to do here is make the background of the page change every 5 seconds (10 seconds actually but 5 is for testing). Along with this I want a countdown animation, like a bar below on the page. I've got the background changing every 5 seconds but I cant get the bar animations working. It only occurs once or twice but then never happens again ://// </p>
  
  <p>this is the code for the bar animation</p>
  
  <pre><code>var initialWidth = 0;
  var initialHeight = 0;
  
  var firstMeasurements = function(){
    initialHeight = $(".countdown").height() + "px";
    initialWidth = $(".countdown").width() + "px";
  }
  
  $(function(){
          var bar = $(".countdown");
  
          function countdown() {
                bar.animate({"width":"0px"}, 5000);
          }
  
          function restartCountdown() {
                bar.css("width", initialWidth);
                countdown();
                setTimeout(restartCountdown, 5000);
          }
  
          bar.css("height", initialHeight);
          restartCountdown();
  });
  </code></pre>
  
  <p>"countdown" is the class of the div that I want to animate every 5 seconds.</p>
  
  <p>Can someone please tell me what is wrong with my code? 
  thank you.</p>