clignotement à homogénéiser

[photoclic]

Bonjour à tous,

J'ai 2 scripts permettant le clignotement.

Code:

//clignotement quand nouveau MP
$(function(){
$('img#i_icon_mini_new_message').closest('a.mainmenu').addClass('M14_blink');
 });
function M14_blink (){
$('.M14_blink').animate({opacity:0},400).animate({opacity:1},100);}
$(document).ready(function(){
setInterval('M14_blink()',1600);
});   

//clignotement quand nouveau Message
$(function(){
        $('img[alt^="Voir le message le plus"]').closest('a').addClass('M14_Blink');
        $('.M14_Blink').each(function() {
        var elem = $(this);
        setInterval(function()
        {
        if
        (elem.css('visibility') == 'hidden')         
        {
        elem.css('visibility', 'visible');
        }
        else
        {
        elem.css('visibility', 'hidden'); 
        } 
        }, 900);
        });
        });


Le 1ier fait clignoter le texte nouveau message quand il y en a 1, le second fait clignoter la petite icone quand il y a un nouveau message.

Serait-il possible de modifier le second code pour qu'il se comporte comme le 1ier au niveau du clignotement?
(Le temps d'extinction du second est trop long).

les 2 codes peuvent peut-être aussi être regroupés.

Merci pour votre aide.

Merci pour votre aide

[Toryudo]

Bonjour !
Alors justement, profitons-en pour nous débarrasser d'un peu de JavaScript / jQuery au passage pour le remplacer par du CSS.
En général, si on peut éviter de faire des animations en JavaScript, c'est toujours mieux ! Et ça va nous permettre de combiner les deux animations en un seul CSS, donc gain de performance et meilleure logique. Voici le CSS à mettre dans la feuille de style :

Code:

.css_blink {
   animation: 1600ms linear infinite CSS_blink;
}
@keyframes CSS_blink {
   0% { opacity: 1; }
   25% { opacity: 0; }
   30% { opacity: 1; }
}

Et voici ce qu'il reste dans le JavaScript (j'ai peut-être trop coupé, mais je pense que c'est bon) :

Code:

//clignotement quand nouveau MP et nouveau message
$(function(){
   $('img#i_icon_mini_new_message, img[alt^="Voir le message le plus"]').closest('a').addClass('css_blink');
});

L'animation est très très légèrement différente, parce que 25% de 1600ms = 400ms comme avant, mais 30% de 1600ms = 80ms plutôt que 100ms... ça veut dire qu'il passe de opacity 0 à opacity 1 20ms plus vite qu'avant. C'est parce que j'aime les pourcentages précis, pas d'autre raison (je suis un peu fou sur les bords, faut pas faire attention).

[photoclic]

Bonjour Toryudo,

Merci pour ton aide.

C'est en place, mais je n'ai pas de clignotement.

Amitiés.

[Toryudo]

Hm, quand je regarde ce qu'il y a dans le CSS, je ne trouve que ça :

Code:

.css_blink{animation:1600ms linear infinite CSS_blink}25%{opacity:0}30%{opacity:1}

J'ai l'impression qu'il y a un problème avec le fait de mettre l'option "Optimiser votre CSS" à Oui. Si je mets à Non, ça marche, si je mets à Oui, ça ne marche pas. C'est comme si la partie "@keyframes CSS_blink {" était effacée par l'optimisation. Je demande !

[photoclic]

Ok. Merci pour le retour.

En effet quand je mets "Non" à "Optimiser le css de base" ça marche.

[photoclic]

N'étant pas certain qu'il y ait une solution au pb css, j'ai essayé de regrouper ainsi en attendant; ça semble aller:

Code:


$(function(){
  $('img#i_icon_mini_new_message, img[alt^="Voir le message le plus"]').closest('a').addClass('M14_blink');
 });
function M14_blink (){
$('.M14_blink').animate({opacity:0},400).animate({opacity:1},100);}
$(document).ready(function(){
setInterval('M14_blink()',1600);
});

[chattigre]

Coucou,

En effet l'optimisation CSS est connue pour faire planter beaucoup des codes contenant des espaces indispensables à sa bonne interprétation, comme ici la structure du contenu de la propriété animation

Dès que l'on sort d'un CSS assez "basique", la désactivation de l'optimisation est nécessaire (et son impact reste relativement limité)

Bonne journée !

[Toryudo]

Courage aux devs, je sens que ça va être compliqué cette histoire

[chattigre]

Courage aux devs, je sens que ça va être compliqué cette histoire

Re,

Justement, depuis le temps (il y a même des tutos où c'est mentionné), je doute que une solution parfaite soit trouvée, à moins de reprendre le système de minification (presque) entièrement ?... En tout cas, l'existence de cette option désactivable a justement pour but de permettre des choses non prises en charge par le mécanisme.

Mais un correctif pour le rendre plus complet (déjà en laissant les espaces non superflus alors que là beaucoup d'espaces utiles sont supprimés ça règlerait une partie du problème...) serait bienvenu en effet

[photoclic]

Bonsoir chattigre et Toryudo,

Le problème css semble en effet pas évident à solutionner sur le court terme.
Je vais donc garder et mettre de coté le traitement de ce sujet en css et en attente au cas où
et vais laisser le JS qui semble fonctionner.

Je vous remercie tous les 2 pour votre implication.

je passe en résolu.

[chattigre]

Bonjour,

Désactiver l'optimisation du CSS ne l'a pas rendu fonctionnel ?

Cette option est un plus, mais n'est absolument pas indispensable, d'ailleurs beaucoup de forums au style complexe la désactivent pour ces raisons...

PS : Et vu le nombre de JS qu'il y a sur le forum, on en arrive à un temps d'exécution qui rend le CSS  plus préférable si possible

Bonne soirée

[Luzz]

Bonjour,

Merci de vos signalements concernant ce problème !

Nous venons de mettre à jour la librairie d'optimisation du CSS. Cela devrait résoudre le problème initial constaté avec le code de @Toryudo (et tous les autres du même type ).

Bonne journée à tous !