Comment faire une pause avant de faire disparaître un élément à l'aide de jQuery ?

Question

Je souhaite afficher un message de réussite sur ma page.

J'utilise jQuery fadeOut méthode pour s’estomper puis supprimer l’élément.Je peux augmenter la durée pour la faire durer plus longtemps, mais cela semble étrange.

Ce que j'aimerais, c'est que l'élément soit affiché pendant cinq secondes, puis s'estompe rapidement et enfin soit supprimé.

Comment pouvez-vous animer cela en utilisant jQuery ?

Answer 1

Le nouveau delay() la fonction dans jQuery 1.4 devrait faire l'affaire.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Answer 2

utiliser setTimeout(function(){$elem.hide();}, 5000);

Où $elem est l'élément que vous souhaitez masquer, et 5000 est le délai en millisecondes.Vous pouvez en fait utiliser n'importe quelle fonction dans l'appel à setTimeout(), ce code définit simplement une petite fonction anonyme pour plus de simplicité.

Answer 3

Pendant que l'approche de @John Sheehan fonctionne, vous rencontrez le jQuery fadeIn/fadeOut problème ClearType dans IE7.Personnellement, j'opterais pour celui de @John Millikin setTimeout() approche, mais si vous optez pour une approche pure jQuery, il est préférable de déclencher une animation sur une propriété non-opacité, telle qu'une marge.

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

Vous pouvez être un peu plus propre si vous savez que votre marge est une valeur fixe :

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

MODIFIER:On dirait que Plug-in jQuery FxQueues fait exactement ce dont vous avez besoin :

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

Answer 4

Pour une approche purement jQuery, vous pouvez faire

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

C'est un hack, mais ça fait le travail

Answer 5

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

Answer 6

Suite au commentaire de dansays, ce qui suit semble fonctionner parfaitement bien :

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Answer 7

Mise à jour pour 1.6.2

La réponse de Nathan Long fera éclater l'élément sans obéir au délai ou fadeOut.

Cela marche:

$('#foo').delay(2000).fadeOut(2000);

Answer 8

La réponse de Dansays ne fonctionne tout simplement pas pour moi.Pour certaines raisons, remove() s'exécute immédiatement et le div disparaît avant que des animations ne se produisent.

Cependant, les travaux suivants (en omettant le remove() méthode):

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

Cela ne me dérange pas s'il y a des DIV cachés sur la page (il ne devrait pas y en avoir plus de quelques-uns de toute façon).