Jquery returning invalid property value in ie6 ie7 ie8 for slider

I am working on a jquery slider that seems to w开发者_如何学运维ork well in all browsers except for ie6 ie7 ie8. I am getting a invalid property value for these browsers. Strangely the slider will work if you rapidly click in the bottom square while in ie. I have remapped the $docready as I am working within wordpress.

I am working on it locally so I created a fiddle, if anybody has any solutions or ideas it would be appreciated.

view demo

Cheers Nik

---

jQuery doesn't support color animation through animate. Removing the following statements fixes the issue for IE:

//headers.not(headers[num]).animate({color:hColor});

//  theHeader.animate({color:'#000'});

example: http://jsfiddle.net/kP4F2/7/

If you want to animate the color's you could include jQuery UI, which enables color animations as well.

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

http://jsfiddle.net/niklasvh/kP4F2/11/

For more information what you can do with animate, have a look at the documentation here. What isn't included, can most likely be done using jQuery UI.

---

Tried to do a little debugging in IE.

Seems like this is the cause

theHeader.animate({color:'#000'});

From what I know, you cannot animate the color property.