title: jQuery fade effect not smooth?
body: <p>I am trying to fade transition some text in an array using jQuery, but I'm noticing the effect isn't always smooth - sometimes one item in the array will linger longer than another, sometimes the fade will happen very quickly. It seems as though it's hanging at times but there's virtually nothing on the page to hang it. Am I doing something wrong?</p>
  
  <p>Code is here:</p>
  
  <p>CSS:</p>
  
  <pre><code>div { color:blue; font-size:6em }
  .red { color:red; }
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>var arr = [ "one", "two", "three", "four", "five" ];
  
  (function timer(counter) {
  var text = arr[counter];
  
  $('#target').fadeOut(function(){
      if(text === 'one') {
          $('#target').addClass("red");
      }
      else {
          $('#target').removeClass("red");
      }
      $('#target').empty().append(text).fadeIn();
  });
  
  delete arr[counter];
  arr.push(text);
  
  setTimeout(function() {
      timer(counter + 1);
  }, 3000);
  })(0);
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="target"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jsfiddle:
  <a href="http://jsfiddle.net/58Jv5/4/" rel="nofollow">http://jsfiddle.net/58Jv5/4/</a></p>
  
  <p>Note: I'm seeing the issue in FF 12 on a mac, safari seems to work fine.</p>