title: stop animation on window blur
body: <p>I have the following code, it fades elements in and out in a repeating cycle. When the tab is inactive the text within the divs piles up on top of each other for a split second before being cleared when the tab is activated again. Is there a way to stop this animation when the window blurs and start it again on focus?</p>
  
  <pre><code>(cycle = function () {
  
      setTimeout(function(){$('#right').fadeOut(1000)},10000);
      setTimeout(function(){$('right').fadeIn(1000)}, 11000);
      setTimeout(function(){$('#left').fadeOut(1000)},13000);
      setTimeout(function(){$('#left').fadeIn(1000)},14000);
      setTimeout(function(){$('#left').fadeOut(1000)},15000);
      setTimeout(function(){$('#left').fadeIn(1000)},17000);
  
  })();
  </code></pre>