97 votes

Élément de masquage automatique jQuery après 5 secondes

Est-il possible de masquer automatiquement un élément dans une page web 5 secondes après la forme de charges à l'aide de jQuery?

En gros, j'ai

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

que j'aimerais disparaître au bout de 5 secondes. J'ai regardé de jQuery UI et le masquer effet, mais je vais avoir un peu de mal à arriver fonctionner de la manière dont je le veux.

<script type="text/javascript">
        $(function() {
            function runEffect() {

                var selectedEffect = 'blind';

                var options = {};

                $("#successMessage").hide(selectedEffect, options, 500);
            };

	        $("#successMessage").click(function() {
		        runEffect();
		        return false;
	        });
        });
    </script>

J'aimerais que la fonction de clic pour être enlevé et ajouter un délai d'attente de la méthode qui appelle la runEffect() au bout de 5 secondes.

mucho gracias!

227voto

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

120voto

Konstantin Tarkus Points 16862
 $(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);
});
 

Remarque : pour que votre fonction jQuery fonctionne dans setTimeout, vous devez l’envelopper dans

 function() { ... }
 

2voto

CMS Points 315406

Vous utilisez setTimeout sur la fonction runEffect:

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

2voto

Petertje Points 1

Je pense que vous pourriez aussi faire quelque chose comme ...

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

et faites vos effets animés sur l'événement-clic ...

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

Salutations,

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X