Masquer le div après quelques secondes

Je me demandais, comment dans jquery suis-je capable de 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.

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

Vous pouvez essayer le .delay()

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

appelez le div définissez le temps de retard 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/

jquery propose une variété de méthodes pour masquer le div de manière chronométrée qui ne nécessitent pas de configuration et d'effacement ultérieur ou de réinitialisation des minuteries d'intervalle ou d'autres gestionnaires d'événements. Voici quelques exemples.

Peau pure, une seconde de retard

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

Peau pure, pas de retard

// hide immediately
$('#mydiv').delay(0).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 fonctionner comme deuxième paramètre (selon la méthode). La documentation de tous les appels ci-dessus et d'autres appels connexes peut être trouvée ici: https://api.jquery.com/category/effects/

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

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

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

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

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

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

(Permet le chaînage des méthodes)

L'utilisation du minuteur jQuery vous permettra également d'avoir un nom associé aux minuteurs attachés à l'objet. Vous pouvez donc attacher plusieurs minuteries à un objet et arrêter l'une d'entre elles.

$("#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) permettent d'accéder au compilateur JavaScript. Cela est parfois nécessaire, mais dans la plupart des cas, cela indique la présence d'un codage extrêmement mauvais. La fonction eval est la fonctionnalité la plus mal utilisée de JavaScript.

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

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

nous pouvons utiliser directement

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

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>