Elément de masquage automatique jQuery après 5 secondes

Question

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

Fondamentalement, j'ai

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

que je voudrais disparaître au bout de 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 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 la fonction de clic à supprimer et ajouter une méthode de temporisation qui appelle la runEffect() au bout de 5 secondes.

beaucoup de gracias!

Answer 1

$(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 vous rendre le travail de la fonction jQuery à l'intérieur setTimeout vous devez l'envelopper dans

function() { ... } 

Answer 2

Vous utilisez setTimeout sur vous fonctionnez runEffect:

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

Answer 3

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

Answer 4

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

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

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

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

Salutations,

Answer 5

Vous pouvez essayer:

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

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

Answer 6

Voici comment vous pouvez définir le délai d'expiration après avoir cliqué.

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

// 5000 = 5sec = 5000 millisecondes

Answer 7

S'il vous plaît noter que vous devrez peut-être afficher div texte à nouveau après qu'il a disparu. Vous devrez donc également vider et afficher de nouveau 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 setTimeout, du moins pas à cacher automatiquement un élément.