Fai svanire un div bene dopo un determinato periodo di tempo

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

  •  02-07-2019
  •  | 
  •  

Domanda

Qual è il modo migliore per far svanire <div> dopo un determinato periodo di tempo (senza usare alcune delle librerie JavaScript disponibili).

Sto cercando una soluzione molto leggera che non richieda un'enorme libreria JavaScript da inviare al browser.

È stato utile?

Soluzione

Non sono sicuro del motivo per cui saresti così contrario all'utilizzo di qualcosa come jQuery, il che renderebbe questo effetto quasi banale, ma essenzialmente, devi avvolgere una serie di modifiche a -moz-opacità, opacità e filtro: regole alfa CSS in un setTimeout ().

Oppure usa jQuery e avvolgi una chiamata fadeOut () in setTimeout. La tua scelta.

Altri suggerimenti

Ecco alcuni javascript che lo fanno. L'ho trovato su un sito Web tutorial javascript da qualche parte (che non sono stato in grado di trovare di nuovo) e l'ho modificato. 

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);
}

Il seguente codice HTML mostra come funziona: 

<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>

Al giorno d'oggi, userei sempre una libreria per questo - i progressi che hanno fatto sono stati fenomenali e ne vale la pena la sola funzionalità cross-browser. Quindi questa risposta è una non risposta. Vorrei solo sottolineare che jQuery è tutto di 15kB.

Usa setTimeout con l'ora iniziale per attivare la routine di dissolvenza e quindi usa setTimeout con timer basso per passare attraverso il livello di opacità dell'immagine fino a quando non scompare.

Tuttavia, jQuery può arrivare a circa 15k ed è un download una tantum per il client, quindi non lo definirei enorme.

Prova la libreria di animazione YUI (Yahoo User Interface): http://developer.yahoo.com / Yui / animazione /

Non reinventare la ruota. Le biblioteche sono nostre amiche. : -)

So che sei giù nelle biblioteche, ma ti consiglio di dare un'occhiata a moo.fx: http: //moofx.mad4milk.net/ - Penso che sia come 3k.

jQuery è anche dannatamente piccolo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top