Élément jQuery autohide après 5 secondes

92

Est-il possible de masquer automatiquement un élément dans une page Web 5 secondes après le chargement du formulaire en utilisant jQuery?

Fondamentalement, j'ai

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

que j'aimerais disparaître après 5 secondes. J'ai regardé l'interface utilisateur jQuery et l'effet de masquage, mais j'ai un peu de mal à le faire fonctionner comme je le souhaite.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

Je voudrais que la fonction de clic soit supprimée et ajoute une méthode de délai d'expiration qui appelle runEffect () après 5 secondes.

jquery jquery-ui

— Chris Conway
source

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

Remarque : afin de faire fonctionner la fonction jQuery dans setTimeout, vous devez l'envelopper dans

function() { ... }

— Konstantin Tarkus
source

1

J'ai essayé ce code sur mon site Web. Mais ça n'a pas marché. A part ce script js, de quoi ai-je besoin pour le faire fonctionner? S'il vous plaît des conseils! Je vous remercie!

— Jornes

1

@Jornes assurez-vous que ce script se trouve après <script src="jquery.js"></script>sur votre page.

— Konstantin Tarkus

217

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

— Justmeol
source

2

Soyez averti que cette solution casse $ ('html'). Click (function () {// click outside $ ("# selector"). FadeOut ();});

— max4ever

Merci pour cette solution simple.

— Ron

Merci solution très simple!

— Anahit DEV

9

Tu peux essayer :

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

Si vous avez utilisé ceci, votre div sera masqué après 30 secondes.J'ai également essayé celui-ci et cela a fonctionné pour moi.

— Chérie
source

3

Veuillez noter que vous devrez peut-être afficher à nouveau le texte div après sa disparition. Vous devrez donc également vider puis ré-afficher l'élément à un moment donné.

Vous pouvez le faire avec 1 ligne de code:

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

Si vous utilisez jQuery, vous n'avez pas besoin de setTimeout, du moins pour masquer automatiquement un élément.

— Cris
source

1

Vous utilisez setTimeout sur votre fonction runEffect:

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

— Christian C. Salvadó
source

1

Je pense que vous pouvez 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,

— Petertje
source

1

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

— user3778023
source

0

C'est ainsi que vous pouvez définir le délai après avoir cliqué.

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

// 5000 = 5sec = 5000 millisecondes

— Aakash Pahuja
source