JQuery color animations not firing reliably

Question

I'm having a problem using the jquery hover events. I've created a reduction of the problem. You can find a working demonstration here. I can reproduce this after moving the mouse around in IE, FF, Opera, and Chrome.

I'm using queued animations in my mouseover event. Roughly 1% of the time, the color of the td elements is left as #0f0 after the mouse has left the td though. This should not be. The mouseout event should guarantee that eventually all tds turn back to #00f after a time has passed.

Update 2:

I've now reduced this probably about as far as it will go. No mouse events used at all. It's started working better in Opera, but now IE is a total cluster.

Anyway, I'm using a button to trigger this:

function ani() {
 $('td')
  .stop()
  .animate({backgroundColor: '#0f0'}, 3000)
  .animate({backgroundColor: '#00f'}, 3000);
}

See it here.

Update [n + 1]:

I just can't leave this alone. I've determined that the animation actually is occurring. It's just not automating the background color. I've done this by adding text and animating the background and foreground in unison. Under normal conditions, you should never see the text once it starts animating, but sometimes the background gets "forgotten", and sometimes the foreground. This indicates to me, that a jquery animation is actually occurring, but it is just not animating all the attributes it was instructed to. For the curious, see it in action here. (warning: IE chokes pretty hard on this)

Ok, going to play some video games now.

Answer 1

I don't understand how you get your 1% figure. I'm not sure about what behavior you're seeing, but in both FF3 and IE8 I get this ugly illegal-property-value error as documented here: http://dev.jqueryui.com/ticket/4251. More relevantly, a good dozen of them aren't changing colors, even if changed to simply a single-color animate.

Fixing that line in the jquery.color.js and both FF3 and IE8 work like a charm, although IE8 white-screens, it recovers eventually.

jQuery is great for managing the DOM, not so great for effects. In my experience, the UI stuff is painful to use and has always had issues. The framework itself, though, has always treated me well.