fadeTo does not fade inner div in IE9

Question

I'm having a problem in IE9 and previous versions with fading. It works in chrome/firefox. A jsFiddle example is provided.

I'm trying to fade a div containing an image absolute positioned and a text in a div. All is contained in an outer div component_statsbox_helper which is initially hidden. When I try to fade in this element, the image is faded nicely, but the text within the div shows up immediately.

http://jsfiddle.net/25Jbj/51/ (try it in IE!)

<div id="component_statsbox">
            <div id="component_statsbox_helper" class="hidden">
                <img alt="stats" src="http://www.esus.be/stats.png"></img>
                <div class="stats_inner">
                    Date of birth: <span class="stats_inner_text">test</span><br/>
                    Time of birth: <span class="stats_inner_text">test</span><br/>
                    Place of birth: <span class="stats_inner_text">test2</span><br/>
                    Weight: <span class="stats_inner_text">test3</span><br/>
                    Height: <span class="stats_inner_text">test4</span><br/>
                    Mother: <span class="stats_inner_text">test5</span><br/>
                    Father: <span class="stats_inner_text">test6</span><br/>
                </div>
            </div>
        </div>

jquery code to fade:

jQuery(document).ready(function(){
   jQuery('#link').click(function(){
      jQuery('#component_statsbox_helper').fadeTo(3500, '1');
   });
});

Answer 1

Setting .state_inner to display:none; at the start you can then fade in the text at the same time but as a separate call using fadeIn().

jQuery(document).ready(function() {
    jQuery('#link').click(function() {
        jQuery('#component_statsbox_helper').fadeTo(3500, '1');
        $('.stats_inner').fadeIn(3500);
    });
});​

As fadeTo() and fadeIn() are asynchronous, both lines will executes simultaneously. This should give you the same effect you had before, except it works in IE9 too.

DEMO - Fade Text with image in IE9.