fadeTo 不会在 IE9 中淡化内部 div

Question

我在 IE9 和以前的版本中遇到了褪色问题。它适用于 chrome/firefox。提供了一个 jsFiddle 示例。

我正在尝试淡化包含绝对定位的图像和 div 中的文本的 div。所有内容都包含在最初隐藏的外部 div component_statsbox_helper 中。当我尝试淡入这个元素时，图像会很好地淡化，但 div 中的文本会立即显示出来。

http://jsfiddle.net/25Jbj/51/（在 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代码：

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

Answer 1

在开始时将.state_inner 设置为display:none;，然后您可以同时淡入文本，但可以使用fadeIn() 单独调用。

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

由于fadeTo() 和fadeIn() 是异步的，两条线将同时执行。 这应该会给您带来与之前相同的效果，除了它也适用于 IE9。

DEMO - 在 IE9 中使用图像淡化文本。