How to use jQuery fadeIn and FadeOut effect in warnings to users

Question

How to use jQuery fadeIn and FadeOut effect in warnings to users

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

I 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

javascript jquery jquery-ui

Author: André Ribeiro, 2015-02-04

Source

2 answers

score 5 · Answer 1

You can do 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 "warning" div comes with display: none by default and is displayed by the fadeIn() function at the time the document finishes loading. Just after fadeIn() finishes the animation, the callback is called and adds a timeout to hide the div after 10 seconds.

score 0 · Answer 2

Use setInterval to wait a while after the messages are displayed. Also use the callback parameter of the fadeIn and fadeOut commands, 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.

Edition

To run right after page load, move code out of 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>