2

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');
   });
});
javacoder
  • 732
  • 1
  • 12
  • 24

1 Answers1

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.

Community
  • 1
  • 1
Nope
  • 22,147
  • 7
  • 47
  • 72
  • Hey Francois, I was thinking of going that route, but it felt so wrong :) But if it is so, it is so and i'll accept your answer. Thank you. Do you know if this is a well known issue in IE ? Strangely enough, your solution works in IE7 and IE9 but not in IE8. – javacoder Dec 03 '12 at 22:11
  • @Javacoder: sorry but I don't know if this is a common issue or why IE8 is behaving differently. If you need to support different versions of IE you could check the version and apply different strategies. – Nope Dec 03 '12 at 22:43