elemento de ocultación automática de jQuery después de 5 segundos

92

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

Básicamente, tengo

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

que me gustaría desaparecer después de 5 segundos. He mirado la interfaz de usuario de jQuery y el efecto de 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.

Chris Conway
fuente

Respuestas:

116
$(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 función jQuery funcione dentro de setTimeout, debe envolverla dentro

function() { ... }
Konstantin Tarkus
fuente
1
Probé este código en mi sitio web. Pero no funcionó. Aparte de este script js, ¿qué más necesito para que funcione? ¡Por favor aconséjame! ¡Gracias!
Jornes
1
@Jornes asegúrese de que este script se encuentre después <script src="jquery.js"></script>en su página.
Konstantin Tarkus
218
$('#selector').delay(5000).fadeOut('slow');
solo meol
fuente
2
Tenga en cuenta que esta solución rompe $ ('html'). Click (function () {// haga clic fuera de $ ("# selector"). FadeOut ();});
max4ever
Gracias por esta sencilla solución.
Ron
Gracias solución muy simple!
Anahit DEV
9

Puedes probar :

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

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

cariño
fuente
3

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

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

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

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

Cris
fuente
1

Usas setTimeout en tu función runEffect:

function runEffect() {
    setTimeout(function(){
        var selectedEffect = 'blind';
        var options = {};
        $("#successMessage").hide(selectedEffect, options, 500)
     }, 5000);
}
Christian C. Salvadó
fuente
1

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,

Petertje
fuente
1

jQuery (". success_mgs"). show (); setTimeout (function () {jQuery (". success_mgs"). hide ();}, 5000);

usuario3778023
fuente
0

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

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

// 5000 = 5 segundos = 5000 milisegundos

Aakash Pahuja
fuente