jQuery .animate() not doing anything in IE8

I have a div of text (#text-write), each character of which is spanned. The div is absolutely positioned inside a relatively positioned container div (#typetext). Here's the effect intended:

1. Animate inner div (#text-write) to opacity 0 for 400ms.
2. Animate each span inside inner div one after the other to opacity 1 for 400ms each.
3. Pause for 5 seconds.
4. Go back to 1.

I simply can't make this work in IE8. It works in IE7 and below, IE9, other major and obscure (that i know of) browsers. I've been pulling my hair trying out everything I found on the net (add layout to the absolutely positioned inner div, play with filter, try fade, etc.) for the last 5 or so hours.

The logic is running (I tried inserting an alert in the recursive call, and IE8 does the alert for each spanned letter and in the exact timing, even the pause), no errors in console, either.

But nothing is happening to the opacity. It does not even disappear. It just stays there.

Can you help?

        jQuery(function() {
            // span each letter in text
            var textType = jQuery('#text-write').remove().text(), textTypeLength = textType.length,
                fadeSpeed = 400, fadePause = 5000,
                textSpanned = '';
            for (i=0;i<textTypeLength;i++) textSpanned += '<span>' + textType.charAt(i).replace(' ','&nbsp;') + '<\/span>';
            jQuery('#typetext').append('<div id="text-write">'+ textSpanned + '<\/div>');

            // fade phrase logic
            function fadeType(){
                var letters = jQuery('#text-write span').animate({opacity: 0}, fadeSpeed),
                    开发者_运维百科i=0;
                (function(){
                    jQuery(letters[i++]).animate({opacity: 1}, fadeSpeed, arguments.callee);
                })();
            }

            // make it happen
            fadeType();
            setInterval(function(){fadeType();},fadePause + fadeSpeed + (textTypeLength*fadeSpeed));

        });

i found the answer over at http://api.jquery.com/fadeTo/#dsq-cite-119679059

the <span> elements i wanted to animate were of course inline. displaying them as inline-block finally did it for ie8. thanks much jeko, who found the solution over at http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

posting here for anyone else out there who may need it and not waste as much time as i had.

As an addition, I was using animate to move items around with percentages. IE does not support percents. I switched animate from percentages to pixels and it worked just fine.