Hacer que un div se desvanecen muy bien después de una determinada cantidad de tiempo

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

  •  02-07-2019
  •  | 
  •  

Pregunta

¿Cuál es la mejor manera de hacer un <div> desaparecen después de una determinada cantidad de tiempo (sin el uso de algunas de las bibliotecas de JavaScript disponibles).

Estoy buscando un muy ligero solución que no requiere de una enorme biblioteca de JavaScript para ser enviado al navegador.

¿Fue útil?

Solución

No está seguro de por qué te gustaría estar tan en contra de el uso de algo como jQuery, lo que haría que el logro de este efecto todos, pero trivial, pero esencialmente, usted necesita ajustar una serie de cambios en el -moz-opacity, la opacidad y el filter:alpha reglas CSS en un setTimeout().

O, el uso de jQuery, y la envoltura de un fadeOut() llamada en setTimeout.Su elección.

Otros consejos

Aquí un poco de javascript que hace.Me lo encontré en un tutorial de javascript sitio web en algún lugar (que yo era incapaz de encontrar de nuevo) y modificado.

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

El siguiente código html muestra cómo funciona:

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

En estos días, yo siempre uso una biblioteca para que -- el progreso que hemos hecho ha sido fenomenal, y la cruz de la funcionalidad del navegador solo vale la pena.Así que esta respuesta es un no-respuesta.Me gustaría señalar que jQuery es todo de 15kB.

Usar setTimeout con el tiempo inicial para activar el fundido de la rutina y, a continuación, usar setTimeout con baja temporizador a paso a través del nivel de opacidad de la imagen hasta que se ha ido.

Sin embargo, jQuery puede bajar a alrededor de 15k y es de una sola descarga para el cliente, así que no llame es enorme.

Pruebe el de YUI (Yahoo User Interface) de la Animación de la biblioteca: http://developer.yahoo.com/yui/animation/

No reinventar la rueda.Las bibliotecas son nuestros amigos.:-)

Sé que usted está abajo en las bibliotecas, pero yo recomiendo echar un vistazo a moo.fx: http://moofx.mad4milk.net/ - Creo que es como 3k.

jQuery es muy muy pequeño también.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top