2

IE9および以前のバージョンでフェードの問題が発生しています。chrome/firefoxで動作します。jsFiddleの例が提供されています。

絶対位置に配置された画像とdiv内のテキストを含むdivをフェードしようとしています。すべては、最初は非表示になっている外部divcomponent_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');
   });
});
4

1 に答える 1

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でも機能することを除けば、以前と同じ効果が得られるはずです。

デモ-IE9の画像でテキストをフェードします。

于 2012-12-03T01:39:18.863 に答える