jQuery на документе готов мой выбор прозрачности: 0, IE задержка? - PullRequest
Новая
       6

jQuery на документе готов мой выбор прозрачности: 0, IE задержка?

0 голосов
/ 03 декабря 2010

на документ готов, у меня есть выбор, который устанавливает непрозрачность элементов: 0, а затем анимировать их на 1. Это хорошо в Safari и FF, но в IE в готовом окне я вижу, что элементы появляются за мгновение до того, как к ним был применен JavaScript Любое предложение? Я должен установить видимость ни одного для всех из них через CSS?

спасибо д 

var i = 0;
$mySelection.each(function() {
$(this).css("opacity","0"); // qui hide
$(this).delay((i * 100) + ($mySelection.length)).animate({ opacity: "1"}, {queue:true, duration:1000, easing:"quartEaseIn"}); 
        i++;
    })

Ответы [ 2 ]

0 голосов
/ 03 декабря 2010

Это классическая проблема:

Вы хотите, чтобы какой-то HTML-элемент был невидимым, если Javascript включен, но вы хотите, чтобы HTML-элемент был видимым, если нет JS. (чем вы делаете анимацию, но это не проблема)

Еще одна хорошая вещь - поместить как можно больше стилей в CSS-файлы, а не в JS-скрипты.

Таким образом, хорошим решением было бы иметь возможность сказать в CSS: «Если включен JavaScript, примените этот стиль».

Для этого я обычно использую очень маленький фрагмент кода в заголовке HTML: 

<script type="text/javascript">
    //<![CDATA[
        document.documentElement.className='js'
    //]]>
</script>

Это добавит «js» className к тегу, если включен javascript.

Вы можете использовать это "js" className в ваших файлах CSS, чтобы определить некоторые стили на случай, если Javascript включен. Этот CSS будет активен во время загрузки HTML, поэтому вам не нужно ждать, пока DOM будет готов начать применять стили с JS. Таким образом, вы получите гораздо лучший опыт загрузки.

Пример CSS: 

#MyappearingElement { display: block; }
.js #MyappearingElement { display: none; }

С этим фрагментом CSS элемент будет виден при загрузке страницы, только если Javascript отключен. Если Javascript включен, элемент не отображается, поэтому я могу сделать хорошую анимацию, чтобы показать его.

0 голосов
/ 03 декабря 2010

Вы должны установить ваши элементы на «отображение: нет» в вашем CSS.Тогда ваши элементы не будут видны с самого начала.

Но если вы установите для них непрозрачность: 0 в вашем готовом скрипте, вы не сможете контролировать «когда» ваш браузер выполняет эти команды.Если ваш браузер запускает готовый скрипт всего через 10 мс после загрузки страницы, вы увидите эти элементы.

...