Error in delaying hide message using delay & fadeOut - jQuery

Question

Error in delaying hide message using delay & fadeOut - jQuery

Navigation

#1 by (1 votes)

1

I have the following line that sends me a success message with div , but some penalties I can read the message.

$('.message').html(textStatus).delay(60000).fadeOut(60000);
location.href = 'exito.php';},60000);

Unlike location.href = 'exito.php';},60000); that redirects in a minute.

I add the same value:

$('.message').html(textStatus).delay(60000).fadeOut(60000);

But the message is hidden in less than 7 seconds.

How can I change the delay the message disappears for 30 seconds or even a minute? Like the location that does work correctly.

jquery

asked by Eugenio 29.08.2018 в 17:38

source

1 answer

Animation XML fragment with setTransition does not work How can I generate a dynamic id from 1 to 10 with js

score 1 · Answer 1

Look, you can use something like this

$('#Mensaje').html("HOLA"); //SETEO EL TEXTO EN EL OBJETO
setTimeout(function(){ //INICIO UN RELOJ DE 3 SEGUNDOS
    $('#Mensaje').fadeOut("fast"); //OCULTO EL MENSAJE
},3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Mensaje"><div>

More info setTimeout link

The Value 3000 The seconds = 3

30000 It would be 30 seconds

Although testing your code also works well, in this example you wait 30 seconds to hide the message

$(".Mensaje")
.html("HOLA") //SETEO EL HTML
.delay(30000) //ESPERO 30 SEGUNDOS
.fadeOut("fast"); //OCULTO

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Mensaje"></div>

More info delay link

More info fadeout link

Also I leave you an example with which you can play a little over time

var segundos=0;
function Contador(){
    $("#Contador").text(segundos/1000);
    if(segundos>0){
        setTimeout(function(){
            segundos-=1000;
            Contador();
        },1000);
    }else{
    	$("#Contador").text("");
    }
}
$("#Iniciar").click(function(){
    segundos=$("#Tiempo").val();
    var rs=segundos;
    Contador();
	$(".Mensaje").show()
        .html("HOLA")
        .delay(rs)
        .fadeOut("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="Tiempo" placeholder="Tiempo" value="3000">
<button id="Iniciar">Iniciar conteo para ocultar</button>
<div id="Contador"></div>
<div class="Mensaje"></div>

Greetings:)