fadeTo не затухает внутренний div в IE9

У меня проблема в IE9 и предыдущих версиях с замиранием. Работает в хроме/фаерфоксе. Предоставляется пример 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');
   });
});

html jquery css internet-explorer fadeto
person javacoder    schedule 03.12.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Установив .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.

person Nope    schedule 03.12.2012
comment
Привет, Франсуа, я думал пойти по этому пути, но это было так неправильно :) Но если это так, то это так, и я приму твой ответ. Спасибо. Знаете ли вы, является ли это известной проблемой в IE? Как ни странно, ваше решение работает в IE7 и IE9, но не в IE8. - person javacoder; 04.12.2012
comment
@Javacoder: извините, но я не знаю, является ли это распространенной проблемой или почему IE8 ведет себя по-другому. Если вам нужно поддерживать разные версии IE, вы можете проверить версию и применить разные стратегии. - person Nope; 04.12.2012