11564 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Clignotement sur Fadein animate

Bonjour,

Je souhaite que la partie centrale de mes pages apparaissent en fondu.
Mon script principal début donc ainsi :


jQuery(document).ready(function($) {
     $("main").css({"opacity":"0"});
     $("main").animate({"opacity":"1"},1000);


Je ne rends pas main invisible en css pour le cas où le js n'est pas activé.

Le souci est que parfois, aléatoirement, j'observe un clignotement, comme une double exécution.
Mon site étant en local, je ne peux pour l'instant vous le montrer.

Merci d'avance Smiley smile

Edit : en me relisant j'ai un déclic : le pb ne serait-il pas résolu si j'exécutais le animate uniquement lorsque .css a fini d'être exécuté ?
Modifié par Manhattan (10 Feb 2014 - 12:40)
salut,
tu pourrais le faire directement via CSS. La technique la plus répandue pour ne pas appliquer de styles au cas où JS serait désactivé, est de donner une classe à ton root <html> (genre "no-js") et de supprimer cette classe dès le chargement de ta page en JS. Comme tu pourrais faire l'inverse, en donnant une classe "js" à ton root dès le départ.
Merci Smiley smile
Je n'avais jamais utilisé @keyframes.

J'ai donc essayé ceci :

@-webkit-keyframes monFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

main{overflow:hidden;
  -webkit-animation: monFadeIn 3s ; 
  -moz-animation:    monFadeIn 3s ; 
  -o-animation:      monFadeIn 3s ; 
  animation:         monFadeIn 3s ;
}


et cela semble marcher Smiley smile
Et ça m'arrange comme ça je peux aisément virer l'animation pour les mobiles.
Ah mais je ne voyais pas ça comme ça Smiley biggrin . C'était plus dans le genre

<html class="no-js">
   ...
   <script type="text/javascript">document.documentElement.className = ""</script>
</html>



Element {opacity:0}
.no-js Element {opacity:1}

Et puis tu garderais ton même code pour l'animation avec la partie "$("main").css({"opacity":"0"})" en moins.
Par contre si tu utilises les @keyframes, il faut aussi les préfixer pour "-moz-" et "-o-".
Arf, c'est pas mal non plus ...! Smiley eek
Finalement j'ai le choix et lorsque j'ai le choix, je ne sais plus...
Bon avec le css je suis limité à >ie10, pas avec le js.
...
...
Jvais essayer cette solution.
Bon finalement, j'ai préféré utiliser les keyframes, parce que l'animation est gérée à un seul endroit (css). Ca me parait plus logique.

Par contre merci, je n'avais pas fait gaffe aux prefix Smiley smile
Je t'en prie mais je n'aurais pas fait ce choix.
Si tu utilises déjà JQuery y'a pas mieux pour une large compatibilité. De plus, les animations CSS c'est du "très récent" donc y'aura pas que IE<10 mais aussi tout le reste.
M'enfin, si tu considères que c'est un vrai plus à mettre, le CSS reste la solution optimale.
"si tu considères que..."


Pas vraiment Smiley confused : mais étant une bille en javascript (entre autre) je ne savais pas transformer ton document.documentElement.className = "" en retiremoiuniquementlaclasseTOTOsurlabaliseHTML car en fait, html se récupère déjà quelques classes de façon dynamique Smiley murf
Modifié par Manhattan (10 Feb 2014 - 19:26)
ah ok Smiley biggrin ça devrait être plutôt simple

document.documentElement.className = document.documentElement.className.replace(/\s*no-js/, "");

Ça pourrait être sûrement encore plus simple, sans doute

document.documentElement.className = document.documentElement.className.replace("no-js", "");
Sujet clos
Aller à