Faire disparaître une div après un laps de temps donné

StackOverflow https://stackoverflow.com/questions/124166

  •  02-07-2019
  •  | 
  •  

Question

Quel est le meilleur moyen de faire disparaître <div> après un laps de temps donné (sans utiliser certaines des bibliothèques JavaScript disponibles).

Je recherche une solution très légère ne nécessitant pas l'envoi d'une énorme bibliothèque JavaScript au navigateur.

Était-ce utile?

La solution

Vous ne savez pas trop pourquoi vous seriez si opposé à l'utilisation de quelque chose comme jQuery, qui rendrait cet effet presque trivial, mais vous devez essentiellement envelopper une série de modifications apportées à -moz-opacity, opacity et filter: Règles alpha CSS dans un setTimeout ().

Ou utilisez jQuery et enveloppez un appel fadeOut () dans setTimeout. Votre choix.

Autres conseils

Voici un javascript qui le fait. Je l’ai trouvé quelque part sur un site Web de tutoriel javascript (que j’ai été incapable de retrouver) et je l’ai modifié. 

var TimeToFade = 200.0;

function fade(eid)
{
    var element = document.getElementById(eid);
    if(element == null) return;

    if(element.FadeState == null)
    {
        if(element.style.opacity == null || element.style.opacity == ''
               || element.style.opacity == '1') {
            element.FadeState = 2;
        } else {
            element.FadeState = -2;
        }
    }

    if(element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    } else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime()
           + ",'" + eid + "')", 33);
    }
}

function animateFade(lastTick, eid)
{
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if(element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        element.style.display = "none";
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft/TimeToFade;
    if(element.FadeState == 1) {
        newOpVal = 1 - newOpVal;
    }

    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

Le code HTML suivant montre son fonctionnement: 

<html><head>
    <script type="text/javascript" src="fade.js"></script>
</head><body>
    <div id="fademe" onclick="fade( 'fademe' )">
        <p>This will fade when you click it</p>
    </div>
</body></html>

Ces jours-ci, j’utiliserais toujours une bibliothèque pour cela. Les progrès qu’ils ont réalisés ont été phénoménaux, et la seule fonctionnalité du multi-navigateur en vaut la peine. Donc, cette réponse est une non-réponse. Je voudrais juste souligner que jQuery est tout de 15ko.

Utilisez setTimeout avec le temps initial pour déclencher la routine de fondu, puis utilisez setTimeout avec un minuteur lent pour faire défiler le niveau d'opacité de l'image jusqu'à ce qu'elle disparaisse.

Cependant, jQuery peut descendre à environ 15 Ko et constitue un téléchargement unique pour le client, je ne l'appellerais donc pas énorme.

Essayez la bibliothèque d’animations YUI (interface utilisateur Yahoo): http://developer.yahoo.com / yui / animation /

Ne réinventez pas la roue. Les bibliothèques sont nos amis. : -)

Je sais que vos bibliothèques vous font défaut, mais je vous conseillerais de regarder moo.fx: http: //moofx.mad4milk.net/ - Je pense que c'est comme 3k.

jQuery est sacrément petit aussi.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top