fadeIn not functioning correctly in IE

fadeIn not functioning correctly in IE

I have three span tags, each containing a word. They are all slightly overlaid. Initially they are all set not to be visible using:

  1. $("#home-feature div.home-feature-item:eq("+(i-1)+") span").fadeOut(0);
Each item is then faded in, one after the other, using:

  1. $("#home-feature div.home-feature-item:eq("+(eq)+") span:eq("+j+")").fadeIn(500);
The fade effect is working perfectly in Firefox, Safari, and Chrome.

Each span tag is absolutely positioned, with an appropriate z-index set. Disabling Javascript shows the correct display, therefore the CSS seems to be ok.

In IE however, with the animation running, as each item fades in, something odd happens. It appears as though z-indexes are ignored until the transition is complete. This results in the currently fading item being in front of all others until the fade is complete.

I've tried things like adjusting the line-height of the spans, playing around with heights etc but no luck.