Masquer le div après quelques secondes


123

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.


1
Le fait de se cacher est-il suffisant ou en avez-vous besoin pour disparaître?
Joel Coehoorn

Réponses:


247

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().


2
et vous avez très bien battu le fou Joel Coehoorn d' un seul coup! :)
cregox

3
@James, Certes, il n'y a pas de différence dans le résultat final, mais je suppose que la mise en œuvre .delay()est plus "native" et élégante pour jQuery.
Paul T.Rawkeen

vous pouvez remplacer .fadeOut('fast')par .hide()pour masquer instantanément le div.
Raptor

90

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/


7
C'est mieux car je n'ai pas besoin d'utiliser setTimeout et le code est plus facile à lire.
Marek Bar

12

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/


10

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.



3

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


2

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

1
Y a-t-il une raison impérieuse d'utiliser le plugin timers sur setTimeout ou setInterval?
dépenser

2
Je dirais que télécharger et attacher un plugin jquery est moins facile que d'utiliser simplement setTimeout.
Nathan Ridley

1
Je ne pense pas que ce soit nécessairement une mauvaise chose, mais comme il est rare que j'utilise des minuteries dans mon code, avoir ce plugin (lire: code supplémentaire, ballonnement) pour ces quelques fois ne l'emporte pas sur le coût. Si vous écriviez beaucoup de code qui nécessitait d'utiliser des minuteries et que vous utilisiez jQuery, je peux voir pourquoi ce plugin serait très utile de conserver la syntaxe jQuery ...
Jason Bunting

0

nous pouvons utiliser directement

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

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

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

Veuillez ne pas publier uniquement le code comme réponse, mais également expliquer ce que fait votre code et comment il résout le problème de la question. Les réponses avec une explication sont généralement plus utiles et de meilleure qualité, et sont plus susceptibles d'attirer des votes positifs.
Mark Rotteveel le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.