Hide div après quelques secondes

Question

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

J'ai fait de mon mieux mais je ne parviens pas à le faire fonctionner.

Answer 1

Ceci 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 souhaitez simplement masquer sans atténuation progressive, utilisez hide () .

Answer 2

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 qu'il puisse être animé, mais vous pouvez également utiliser .hide ().

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

Answer 3

Il existe un moyen très simple de procéder.

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.

$ ("# # quel que soit"). delay (). hide (1);

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

Answer 4

jquery offre diverses méthodes pour masquer la div de manière chronométrée, sans nécessiter de configuration, ni d'effacement ou de réinitialisation ultérieur des minuteries d'intervalle ou d'autres gestionnaires d'événements. Voici quelques exemples.

Peau pure, délai d'une seconde

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

Peau pure, sans délai

// hide immediately
$('#mydiv').delay(0).hide(0); 

Cacher animé

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

De plus, 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 pour tous les appels ci-dessus et d'autres appels connexes peut être trouvée ici: https://api.jquery.com/category/effects/

Answer 5

$.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 de méthodes)

Answer 6

L’utilisation du minuteur jQuery vous permettra également d’avoir un nom associé aux minuteurs associés à l’objet. Vous pouvez donc 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é de JavaScript la plus mal utilisée.

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

Answer 7

Le moyen le plus simple consiste probablement à utiliser le plugin timers. http://plugins.jquery.com/project/timers , puis appeler quelque chose comme

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

Answer 8

nous pouvons utiliser directement

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