2

tenho o script FadeIn:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

tenho o script FadeOut:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
});
</script>
</head>
<body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button>Click to fade out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

Como posso iniciar, exibir, e após 10s finalizar a mensagem usando o jQuery?

2 Respostas 2

5

Você pode fazer assim:

$(function(){
    $("#aviso").fadeIn(700, function(){
        window.setTimeout(function(){
            $('#aviso').fadeOut();
        }, 10000);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aviso" style="display: none;">UM AVISO AQUI!<br />FadeOut depois de 10 segundos!</div>

Explicação:

A div "aviso" vem com display: none por padrão e é exibida pela função fadeIn() no momento que o documento termina de carregar. Logo depois de fadeIn() terminar a animação, o callback é chamado e adiciona um timeout para esconder a div depois de 10 segundos.

1
  • +1. $("#aviso').delay(10000).fadeOut() também dá :) Commented 4/02/2015 às 19:21
0

Utilize setInterval para aguardar um tempo após a exibição das mensagens. Utilize também o parâmetro callback dos comandos fadeIn e fadeOut, para iniciar o timer apenas quando o efeito tiver completado:

<script>
    var timer = null;

    $(document).ready(function(){
        $("button").click(function(){
            // o efeito vai levar 1 segundo (1000 ms) para completar.
            $("#div1").fadeIn(1000, function () {
                // inicia o timer configurado para disparar em 10 segundos (10 * 1000 ms).
                timer = setInterval(function () {
                    // esconde a mensagem.
                    $("#div1").fadeOut(1000);
                    clearInterval(timer);
                }, 10 * 1000);
            });
        });
    });
</script>

Este exemplo irá exibir uma div quando um botão for clicado, aguardará 10 segundos com a div completamente exibida, e então irá escondê-la.

As transições irão durar 1 segundo cada.

Edição

Para executar logo após o carregamento da página, mover o código para fora do callback do click do botão:

<script>
    var timer = null;

    $(document).ready(function(){
        // o efeito vai levar 1 segundo (1000 ms) para completar.
        $("#div1").fadeIn(1000, function () {
            // inicia o timer configurado para disparar em 10 segundos (10 * 1000 ms).
            timer = setInterval(function () {
                // esconde a mensagem.
                $("#div1").fadeOut(1000);
                clearInterval(timer);
            }, 10 * 1000);
        });
    });
</script>
2
  • e como faço pra executá-lo imediatamente quando a página for carregada, sem ter a necessidade de clicar no botão?
    – user20098
    Commented 4/02/2015 às 18:51
  • Veja a resposta editada. Commented 4/02/2015 às 18:54

Você deve fazer log-in para responder a esta pergunta.