title: Background image css animate() within setInterval() function call in JQuery
body: <p>I have noticed a behaviour that I can't explain.  I'm sure it must be my limited knowledge of JQuery/JavaScript.</p>
  
  <p>When I run the following code on my webpage, everything works as expected - the background image rotates:</p>
  
  <pre><code>//background image rotator
  var imgArr = new Array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');
  var preloadArr = new Array();
  var i;
  
  /* preload images */
  for (i = 0; i &lt; imgArr.length; i++) {
      preloadArr[i] = new Image();
      preloadArr[i].src = imgArr[i];
  }
  
  var currImg = 1;
  var intID = setInterval(changeImg, 5000);
  
  function changeImg() {
      $('#homeDiv').css({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' });
  }
  </code></pre>
  
  <p>However, if I replace the <code>.css()</code> function with <code>.animate()</code>, like in the following code, the <code>currImg++</code> seems to increment by 2 and an incorrect image loads.</p>
  
  <pre><code>//background image rotator
  var imgArr = new Array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');
  var preloadArr = new Array();
  var i;
  
  /* preload images */
  for (i = 0; i &lt; imgArr.length; i++) {
      preloadArr[i] = new Image();
      preloadArr[i].src = imgArr[i];
  }
  
  var currImg = 1;
  var intID = setInterval(changeImg, 5000);
  
  function changeImg() {
      $('#homeDiv').animate({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' }, 1000);
  }
  </code></pre>
  
  <p>Is it due to the <code>setInterval</code> process getting 'out of sync' due to the <code>animate()</code> function taking 1000ms?</p>
  
  <p>Thanks</p>
  
  <p>Alex</p>