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

Question

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

Navigation

#1 by (6 votes)
#2 by (1 votes)

2

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 end the message using jQuery?

javascript jquery jquery-ui

asked by anonymous 04.02.2015 / 19:40

2 answers

Run code before the first activity is executed Finding a value in several fields

score 6 · Answer 1

You can do 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><divid="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. Shortly after% w /% finish the animation, the callback is called and adds a timeout to hide the div after 10 seconds.

score 1 · Answer 2

Use setInterval to wait a while after 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 completely displayed, and then hide it.

Transitions will last 1 second each.

Editing

To execute immediately after loading the page, move the code out of the button's clickback 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>