web-dev-qa-db-fra.com

Hide div après quelques secondes

Je me demandais comment je pouvais cacher un div après quelques secondes. Comme les messages de Gmail par exemple.

J'ai fait de mon mieux mais je suis incapable de le faire fonctionner.

javascriptjquerytiming
108
James

Cela cachera la div 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 vous cacher sans décoloration, utilisez hide().

227
swilliams

Vous pouvez essayer le .delay()

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

appelez la 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 () afin de l'animer, mais vous pouvez également utiliser .hide ().

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

86
peter punk

Il existe un moyen très simple de le faire.

Le problème est que .delay n'effectue que des animations, vous devez donc faire en sorte que .hide () se comporte comme une animation en lui donnant une durée.

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

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

10
Oisin Lavery

jquery offre diverses méthodes pour masquer la div de manière chronométrée, sans qu'il soit nécessaire de configurer puis d'effacer ou de réinitialiser ultérieurement des minuteurs d'intervalle ou d'autres gestionnaires d'événements. Voici quelques exemples. 

Peau pure 

// hide in one second
$('#mydiv').delay(1000).hide(0);

Peau animée 

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500);

disparaître

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300);

En outre, les méthodes peuvent prendre un nom de file d'attente ou une fonction en tant que second paramètre (selon la méthode). La documentation de tous les appels ci-dessus et d’autres appels connexes est disponible ici: https://api.jquery.com/category/effects/

8
Robert Mauro
$.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 l'enchaînement des méthodes)

6
Peter Smit

L'utilisation de la minuterie jQuery vous permettra également d'associer un nom aux minuteries attachées à l'objet. Ainsi, vous pouvez attacher plusieurs minuteries à un objet et arrêter l’un d’eux.

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

La fonction eval (et ses parents, Function, setTimeout et setInterval) fournit un accès au compilateur JavaScript. Cela est parfois nécessaire, mais dans la plupart des cas, cela indique la présence d’un très mauvais codage. La fonction eval est la fonctionnalité la plus mal utilisée de JavaScript.

http://www.jslint.com/lint.html

3
kevin pepperman

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

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

on peut utiliser directement

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