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() { ... }