JQUERY : texte clignotant qui clignote n'importe comment ! Pourquoi ?
Et si on parlait focus ?
Accueil du blog
Derniers articles
jquery
Il y a plusieurs solutions pour faire clignoter un texte ou autre en JQuery : toggle, animate, fade, etc... couplées en général avec un setInterval().
Ces différentes solutions sont soumises, pour certaines d'entre elles, à un effet pervers dû à la perte de focus : stoppées pendant cette perte, elle rattrapent leur retard quand la fenêtre retrouve le focus ; de là votre image qui se promenait tranquillement devient folle, idem pour votre texte qui se met à clignoter comme un fanatique du clignotement, jusqu'à ce qu'ils aient récupéré leur retard.
C'est pénible, ça fait moche et ça inquiète le visiteur.
Il suffit de dire à votre script : "si la fenêtre a le focus, joue l'animation". En code, ça donne ça :
if(document.hasFocus()) {
//animation
}
Sous-entendu : "si elle ne l'a pas, reste couché".
Voici quelques tests :
Quelques remarques : ces bouts de codes sont dans une iframe qui n'a pas le focus par défaut : il faut donc cliquer dessus pour le lui donner ; Ensuite il suffit d'aller dans un autre onglet quelques instants et de revenir pour constater que dans deux cas, les textes clignotants sans la condition hasFocus s'affolent, le temps de récupérer leur retard.
A noter que toggle() et fadeToggle() ne sont pas sensibles à la perte de focus() placés dans un setInterval.
“ Seulement trois mots suffisent !”
A titre d'explication, voici le code pour les fade out/in :
Avec la condition :
if(document.hasFocus()) {
setInterval(function() {
$("#cligno").fadeOut(100).fadeIn(100);
}, 1000 );
}
et sans :
setInterval(function() {
$("#cligno1").fadeOut(100).fadeIn(100);
}, 1000 );
Ne serait-ce pas dommage de s'en priver ? ;-)
Pas encore de commentaire
