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.

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

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');

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í.


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.


1

Usas setTimeout en tu función runEffect:

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

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,


1

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


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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.