Comment créer un effet avec timeout (délai) en jQuery ?
Pour qu'un élément HTML apparaisse et disparaisse, plusieurs solutions sont fournies par la bibliothèque jQuery.
La bibliothèque JavaScript jQuery permet de produire des effets à l'apparition ou à la disparition d'éléments sur la page. Si l'on veut qu'un élément apparaisse dans le but d'afficher une information avant de disparaître, il est possible de mettre en place un délai d'exécution entre les deux commandes.
Il y a plusieurs moyens de parvenir à ce résultat. Pour qu'un élément apparaisse et disparaisse, on utilisera les fonctions fadeIn() et fadeOut(). La première permet à l'élément d'apparaître, la deuxième lui permet de disparaître. La fonction delay() permet d'ajouter un délai entre deux fonctions qui s'exécutent l'une à la suite de l'autre. Pour cela, il suffit d'appeler delay() entre les deux fonctions que l'on souhaite séparer par un délai. Le délai est à préciser en millisecondes. Exemple :
jQuery('monElement').fadeIn().delay(2000).fadeOut();
La deuxième méthode consiste à utiliser la propriété queue qui permet de gérer l'exécution de l'effet et sa durée dans une fil d'attente. La fonction d'animation ne sera exécutée que lorsque la fonction dequeue() sera appelée. En ajoutant la fonction JavaScript setTimeOut, qui crée un timer avec une fonction qui s'exécute après un délai défini dans un paramètre, on obtient le comportement recherché :
jQuery('monElement').fadeIn();
jQuery('monElement').queue(function(){
setTimeout(function(){
jQuery('monElement').dequeue();
}, 2000 );
});
jQuery('monElement').fadeOut();