jQuery sur document prêt mon opacité de sélection: 0, IE delay?

Question

sur doc ready j'ai ma sélection qui définit les éléments opacity: 0 et les anime à 1. C'est sympa sur Safari et FF mais dans IE sur window ready je vois des éléments qui apparaissent quelques instants avant que javascript ne leur soit appliqué. Toute suggestion? Je n'ai pas de visibilité pour tous par css?

merci d

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++; 
    }) 

Answer 1

Vous devez définir vos éléments "display: none" dans votre css. Ensuite, vos éléments ne sont pas visibles depuis le début.

Mais si vous les définissez sur opacity: 0 dans ready-script vous ne pouvez pas contrôler "quand" votre navigateur exécute ces commandes. Si votre navigateur vous exécute ready-script juste 10ms après le chargement de votre page, vous verrez ces éléments.

Answer 2

Ceci est un problème classique:

Vous voulez un élément HTML pour être invisible si Javascript est activé, mais vous voulez l'élément HTML pour être visible s'il n'y a pas JS. (que vous faites une animation, mais ce n'est pas le problème)

Une autre bonne chose serait de mettre autant de styles que possible dans les fichiers CSS plutôt que dans les scripts JS.

Donc une bonne solution serait de pouvoir dire, en CSS: "si javascript est activé, appliquer ce style".

Pour ce faire, je l'habitude d'utiliser un très petit morceau de code dans la partie de tête HTML:

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

Cela ajoutera un « js » className à la balise si javascript est activé.

Vous pouvez utiliser ce "class" dans vos fichiers CSS pour définir des styles juste au cas où Javascript est activé. Ce code CSS sera actif pendant le chargement du code HTML, et vous n'avez donc pas à attendre que DOM soit prêt à commencer à appliquer des styles à JS. De cette façon, vous avez une meilleure expérience de chargement.

CSS exemple:

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

Avec ce morceau de CSS, l'élément sera visible à la page charge que si Javascript est désactivé. Si Javascript est activé, l'élément n'est pas affiché, donc je peux faire une belle animation pour l'afficher.