title: jQuery animation issue with loop with setInterval in FireFox if tab loses focus
body: <p>I developed a little script that make texts like they were coming from far, with jQuery and animate() function.
  I have 2 main problem. The first is described here:
  <a href="https://stackoverflow.com/questions/7425522/jquery-font-size-animation-problem-in-chrome-too-laggy">Jquery font size animation problem in Chrome, too laggy</a></p>
  
  <p>The second is that I need to loop the animation. The way I did works well, but in FireFox it has been implemented a resource saving mechanism that makes things weird when the tab windows of the broser is in background.</p>
  
  <p>I'm quite sure the problem is known, and concern what you can read on Jquery doc for animate():</p>
  
  <blockquote>
    <p>Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.</p>
  </blockquote>
  
  <p>...but I cannot understand how to apply a solution to my script.</p>
  
  <p>You can test and play with the code here: <a href="http://jsbin.com/ehahoc/7/" rel="nofollow noreferrer">http://jsbin.com/ehahoc/7/</a></p>
  
  <p>Just open the code on a tab, then open another tab from another website and keep the tab with my script running in the background for 30 sec, then come back to the code tab and you will see that all the paragraph are now coming with no coordination or sync.</p>
  
  <p>Many thanks!</p>