Fade-In et Fade-Out à l'aide de JavaScript et CSS

La création d'effets de fondu d'entrée et de sortie pour les éléments HTML peut améliorer la attrait visuel des applications Web. Cependant, la mise en œuvre de ces effets peut parfois s'avérer difficile, en particulier lorsque la fonction de fondu entrant ne fonctionne pas correctement.

Dans une implémentation précédente, la fonction de fondu entrant n'augmentait pas l'opacité de l'élément comme prévu. Au lieu de cela, il est resté bloqué à 0,1. Pour résoudre ce problème, nous proposons une méthode plus efficace :

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity='   op * 100   ")";
        op  = op * 0.1;
    }, 10);
}

Cette fonction commence avec une opacité initiale de 0,1 et l'incrémente progressivement jusqu'à ce qu'elle atteigne 1,0, ce qui entraîne un effet de fondu entrant fluide.

Pour le fondu sortant, nous remplaçons le code ci-dessus avec :

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
Cette fonction décrémente continuellement l'opacité jusqu'à ce qu'elle atteigne 0,1, puis masque l'élément pour créer l'effet de fondu souhaité.
N'oubliez pas qu'il est essentiel d'éviter d'utiliser des chaînes comme arguments pour setInterval ou setTimeout en raison de leurs risques de sécurité potentiels.