Contrôler le début d’une animation avec jQuery

L’intérêt majeur du Javascript est l’interaction avec l’utilisateur, ce qui signifie d’afficher des petits messages permettant de donner des informations à l’utilisateur durant ses actions sur votre site web.

Par exemple, l’utilisateur vient de valider un formulaire, l’envoie de celui-ci ce fait par AJAX et à au succès de cette requête on affiche un message d’alerte durant 5 secondes pour lui informer que tout s’est bien déroulé.

Généralement, nous somme obliger d’utiliser un settimeout de Javascript pour pouvoir contrôler la disparition du message, mais je vais vous proposer une petite astuce permettant de gérer cela facilement.

$(document).ready(function() {
	$('#message').fadeIn("slow").animate({opacity: 1.0},5000).fadeOut("slow");
});

La propriété animate permet d’animer un conteneur avec ce que l’on veut (couleur, taille…) pendant un temps donnée. Ici, on change l’opacité du conteneur de 1 vers …1 pendant 5 secondes !

A noter que #message est un conteneur qui, au départ, est caché au départ.