title: Interval, stops when in othertab. when return plays all the interval after each other
body: <p>Bit of a weird title but here what i got.</p>
  
  <p>I have found this question asked a couple of times but the awnsers dont seem to work properly for me</p>
  
  <p>what i got is a footer that bounces up and down to catch your attention, when you hover over it it will expand showing a filter.</p>
  
  <p>Now it works perfectly in the window but when i move to a other tab and go back to the site, it will play all the bounces after each other.</p>
  
  <p>I have read an article that chrome slows down intervals when in another tab to improve cpu speed.</p>
  
  <p>I now have the timer only played when the window is set to focus, and disabled when it is set to blur.
  But this doesnt work 100% of the time. </p>
  
  <pre><code>var $bounceInter = 6000;
  
  function mycode() {
      if($bounceOn == true) {
              $("#footer").animate({bottom:"+=20px"},150, 'swing').animate({bottom:"-=20px"},150, 'swing').animate({bottom:"+=10px"},100, 'swing').animate({bottom:"-=10px"},100,"swing",function(){$("#footer").data("bouncing", false);});
      }
      clearTimeout($bounceTimer);
    $bounceTimer = setTimeout(mycode, $bounceInter); // repeat myself
  }
  
  
  $(window).focus(function() {
      $bounceTimer = setTimeout(mycode, $bounceInter);
  });
  
  $(window).blur(function() {
      clearTimeout($bounceTimer);
  });
  
  var $bounceTimer = setTimeout(mycode, $bounceInter);
  </code></pre>
  
  <p>Any other possible fixes?</p>
  
  <p>I have got the bounce code from another person, maybe the problem is there?</p>