title: jquery setInterval + chrome tabs + builds up animates that displays all quickly at once
body: <p>I have read lots of pages (also on stackoverflow) on how to fix this issue but nothing works for me. Below is the code I currently have:</p>
  
  <pre><code>    var initialFadeIn = 1000;           //initial fade-in time (in milliseconds)
      var itemInterval = 5000;            //interval between items (in milliseconds)
      var fadeTime = 2500;                    //cross-fade time (in milliseconds)
  
      var infiniteLoop = setTimeout(function(){
              position1.eq(currentItem1).stop(true, true).fadeOut(fadeTime);
              if(currentItem1 == numberOfItems1 -1) {currentItem1 = 0;}else{currentItem1++;}
              position1.eq(currentItem1).stop(true, true).fadeIn(fadeTime);
      }, itemInterval);
  </code></pre>
  
  <p>I added the .stop(true, true) but is still builds the animations and then displays all at once.</p>
  
  <p>I also tried:</p>
  
  <pre><code>  infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1);    
  
  function infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1) {
          setTimeout(function() {
                  position1.eq(currentItem1).stop(true, false).fadeOut(fadeTime);
                  if (currentItem1 == numberOfItems1 - 1) {
                          currentItem1 = 0;
                  } else {
                          currentItem1++;
                  }
                  position1.eq(currentItem1).stop(true, false).fadeIn(fadeTime, infiniteLoop(itemInterval, fadeTime, position1, currentItem1, numberOfItems1));
          }, itemInterval);
  }
  </code></pre>
  
  <p>but its just the same.</p>
  
  <p>I was able to link it to window .focus()/.blur() but I would prefer it to stop of keep running in the background - eg: someone is using skype with the page in the background.</p>
  
  <p>Any ideas I should try?</p>
  
  <p>thankyou</p>