has - jQuery autohide elemento después de 5 segundos

jquery has not

Question

¿Es posible ocultar automáticamente un elemento en una página web 5 segundos después de que se cargue el formulario con jQuery?

Básicamente, tengo

<div id="successMessage">Project saved successfully!</div>

que me gustaría desaparecer después de 5 segundos. Miré la interfaz de usuario de jQuery y el efecto ocultar, pero estoy teniendo problemas para que funcione como quiero.

<script type="text/javascript">
$(function() {
function runEffect() {
var selectedEffect = ''blind'';
var options = {};
$("#successMessage").hide(selectedEffect, options, 500);
};
$("#successMessage").click(function() {
runEffect();
return false;
});
});
</script>

Me gustaría que se elimine la función de clic y agregar un método de tiempo de espera que llame a runEffect () después de 5 segundos.

mucho gracias!

Answer 1

Así es como puede establecer el tiempo de espera después de hacer clic.

$(".selectorOnWhichEventCapture").on(''click'', function() {
setTimeout(function(){
$(".selector").doWhateverYouWantToDo();
}, 5000);
});

// 5000 = 5seg = 5000 milisegundos

Answer 2

Creo que también podrías hacer algo como ...

setTimeout(function(){
$(".message-class").trigger("click");
}, 5000);

y haz tus efectos animados en el evento-clic ...

$(".message-class").click(function() {
//your event-code
});

Saludos,

Answer 3

Puedes probar :

setTimeout(function() {
$(''#successMessage'').fadeOut(''fast'');
}, 30000); // <-- time in milliseconds

Si usaste esto, tu div se ocultará después de 30 segundos. También probé este y funcionó para mí.

Answer 4

Tenga en cuenta que es posible que deba volver a mostrar el texto div una vez que haya desaparecido. Por lo tanto, también deberá vaciar y volver a mostrar el elemento en algún momento.

Puedes hacer esto con 1 línea de código:

$(''#element_id'').empty().show().html(message).delay(3000).fadeOut(300);

Si usa jQuery, no necesita setTimeout, al menos no para ocultar automáticamente un elemento.

Answer 5

Usas setTimeout en tu función runEffect:

function runEffect() {
setTimeout(function(){
var selectedEffect = ''blind'';
var options = {};
$("#successMessage").hide(selectedEffect, options, 500)
}, 5000);
}

Answer 6

$(''#selector'').delay(5000).fadeOut(''slow'');

Answer 7

$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#successMessage").hide(''blind'', {}, 500)
}, 5000);
});

Nota : para que su jQuery funcione dentro de setTimeout, debe envolverlo

function() { ... }