Accueil Blog ⇉ JQUERY : texte clignotant qui clignote n'importe comment ! Pourquoi ?

jquery

illustration_article

Focus, le petit truc auquel on ne pense pas assez



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 y a pourtant une toute petite solution ultra-simple : le focus.

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.

help “ 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 ? ;-)



Modifié le 24-10-2019
Article précédent


WordPress et sites dynamiques : après eux le déluge ?
Article suivant


Javascript : effet machine à écrire en 3 lignes

Commentaires

Pas encore de commentaire

Publier un commentaire :



capcha   



Raccourcis : php css html sql js img

Prévisualiser
GB-Net.fr 2024



fleche haut
Résultats de votre recherche pour :
reduce close