Faça um fade div afastado muito bem depois de um determinado período de tempo

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

  •  02-07-2019
  •  | 
  •  

Pergunta

Qual é a melhor maneira de fazer um fade <div> embora depois de um determinado período de tempo (sem usar algumas das bibliotecas JavaScript disponíveis).

Eu estou procurando uma solução muito leve que não requerem uma enorme biblioteca JavaScript para ser enviado para o navegador.

Foi útil?

Solução

Não sei por que você seria tão contra o uso de algo como jQuery, o que tornaria realizar este efeito todos, mas trivial, mas, essencialmente, você precisa quebrar uma série de alterações ao -moz-opacidade, opacidade e filtro: alfa regras CSS em um setTimeout ().

Ou, use jQuery, e enrole uma chamada fadeOut () em setTimeout. Sua escolha.

Outras dicas

Eis alguns javascript que faz isso. Eu encontrei-o em um lugar web site javascript tutorial (que eu era incapaz de encontrar novamente) e 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);
}

A seguir mostra um HTML como 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>

Estes dias, eu sempre usar uma biblioteca para isso - o progresso que eles fizeram foi fenomenal, ea funcionalidade cross-browser só vale a pena. Portanto, esta resposta é um não-resposta. Eu só gostaria de salientar que jQuery é tudo de 15kB.

Use setTimeout com o tempo inicial para acionar a rotina de fade e depois usar setTimeout com baixa temporizador para percorrer o nível de opacidade da imagem até que ela se foi.

No entanto, jQuery pode descer para cerca de 15k e é um download de um tempo para o cliente para que eu não chamaria isso de enorme.

Tente o YUI (Yahoo User Interface) biblioteca de Animação: http://developer.yahoo.com / yui / animação /

Não reinventar a roda. As bibliotecas são nossos amigos. : -)

Eu sei que você está para baixo em bibliotecas, mas eu recomendo dar uma olhada no moo.fx: http: //moofx.mad4milk.net/ -. Eu acho que é como 3k

jQuery é muito muito pequena também.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top