jQuery fadeIn et animations css3

Erik — Tue, 04 Mar 2014 15:48:32 +0000

En utilisant jQuery pour faire un fadeIn() sur un élément qui contenait lui-même un élément ayant une animation css3, je me suis aperçu que le fade de jQuery ne fonctionnait plus correctement : au lieu d’avoir une jolie animation d’apparition, l’élément animé passait d’invisible à visible d’un coup à la fin de la durée d’animation.

Le problème

La fonction fadeIn() de jQuery et les animations css3 ne font pas bon ménage si l’élément sur lequel est appelé fadeIn() contient un autre élément animé via une animation css3.
Un overlay avec un spinner (pour indiquer à l’utilisateur le chargement de quelquechose) pourrait être une bon exemple :

Du html :

Des css :

#overlay{
...
}

#spinner{
	animation: rotation 3s infinite linear;
}

@keyframes rotation{
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

Du javascript :

$('#overlay').fadeIn();

Et la c’est le drame… pas de joli fadeIn, juste une apparition sèche :(

La solution

La solution consiste simplement à appliquer l’animation css3 après le fadeIn() dans le callback de la fonction. Pour se faire, l’animation est déclenchée par l’ajout d’une classe à l’élément animé… on modifie les css en conséquence :

#spinner{
	/* suppression de l'animation qu'on déporte dans une classe */
}

#spinner.animated{
	animation: rotation 3s infinite linear;
}

et on modifie le javascript :

$('#overlay').fadeIn(function(){
	$('#spinner').addClass('animated');
});

Et hop tout rentre dans l’ordre :)

Happy coding !

Twitter : afficher le compteur de tweets avec une url raccourcie

Erik — Mon, 08 Oct 2012 10:56:03 +0000

Si vous utilisez le bouton de partage de Twitter avec une url raccourcie (bit.ly et compagnie) et que vous affichez le compteur de tweets, il se peut que le nombre reste bloqué à 0. Pour palier au problème il faut utiliser le paramètre « data-counturl » avec l’url complète.

Un exemple rapide