How to use jQuery Fadein and Fadeout effect in user warnings

Question

How to use jQuery Fadein and Fadeout effect in user warnings

Asked 9 years, 10 months ago

Viewed 13,898 times

2

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

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

How can I start, display, and after 10s finish the message using jQuery?

2 answers

Browser other questions tagged javascript jquery jquery-ui

You are not signed in. Login or sign up in order to post.

by André Ribeiro • **5,137** points · Answer 1 · 2015-02-04T18:53:25+00:00

You can do it like this:

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

Explanation:

The div "warning" comes with display: none by default and is displayed by the function fadeIn() the moment the document ends loading. Right after fadeIn() finish the animation, callback is called and adds a timeout to hide the div after 10 seconds.

by Vinícius Gobbo A. de Oliveira • **5,575** points · Answer 2 · 2015-02-04T18:48:15+00:00

Utilize setInterval to wait for a time after displaying the messages. Also use the parameter callback of commands fadeIn and fadeOut, to start the timer only when the effect has completed:

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

This example will display a div when a button is clicked, wait 10 seconds with the div fully displayed, and then hide it.

Transitions will last 1 second each.

Editing

To run right after page loading, move the code out of the button click callback:

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