Masquer la division après quelques secondes

Question

Je me demandais comment, en jquery, je peux cacher un div après quelques secondes ? Comme les messages de Gmail par exemple.

J'ai fait de mon mieux mais je n'arrive pas à le faire fonctionner.

Answer 1

Cela permettra de masquer la division après 1 seconde (1000 millisecondes).

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

#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

Si vous voulez juste cacher sans décolorer, utilisez hide() .

Answer 2

Vous pouvez essayer le .delay()

$(".formSentMsg").delay(3200).fadeOut(300);

appelez le div, définissez le délai en millisecondes et définissez la propriété que vous souhaitez modifier, dans ce cas, j'ai utilisé .fadeOut() pour qu'il puisse être animé, mais vous pouvez également utiliser .hide().

http://api.jquery.com/delay/

Answer 3

Il y a un moyen très simple de le faire.

Le problème est que .delay n'a d'effet que sur les animations. Vous devez donc faire en sorte que .hide() agisse comme une animation en lui donnant une durée.

$("#whatever").delay().hide(1);

En lui donnant une durée courte, elle semble être instantanée, tout comme la fonction .hide normale.

Answer 4

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

De http://james.padolsey.com/javascript/jquery-delay-plugin/

(Permet le chaînage des méthodes)

Answer 5

Le moyen le plus simple est probablement d'utiliser le plugin timers. http://plugins.jquery.com/project/timers et ensuite appeler quelque chose comme

$(this).oneTime(1000, function() {
    $("#something").hide();
  });