web-dev-qa-db-fra.com

retarder les effets JQuery

Je souhaite supprimer un élément et tous ses éléments enfants après un délai de quelques secondes. mais je n'ai pas trouvé de moyen de spécifier qu'un effet doit démarrer après un délai spécifié.

javascriptjqueryeffects
48
Dónal
setTimeout(function() { $('#foo').fadeOut(); }, 5000);

Le 5000 est de cinq secondes en millisecondes.

77
swilliams

J'utilise ce plugin de pause que je viens d'écrire

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

Appelez ça comme ceci:

$("#mainImage").pause(5000).fadeOut();

Remarque: vous n'avez pas besoin de rappel.

Edit: Vous devez maintenant utiliser la méthode jQuery 1.4. Built in delay () . Je n'ai pas vérifié mais je suppose que c'est plus 'intelligent' que mon plugin.

43
Simon_Weaver

Auparavant, vous faisiez quelque chose comme ça

$('#foo').animate({opacity: 1},1000).fadeOut('slow');

La première animation ne fait rien puisque vous avez déjà l'opacité 1 sur l'élément, mais elle s'arrêterait pendant un certain temps.

Dans jQuery 1.4, ils ont intégré cela dans le framework afin que vous n'ayez pas à utiliser le hack comme ci-dessus.

$('#foo').delay(1000).fadeOut('slow');

La fonctionnalité est la même que le plugin original jQuery.delay()http://www.evanbot.com/article/jquery-delay-plugin/4

19
Drew

La meilleure façon est d'utiliser la méthode de délai jQuery:

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

11
user263865

J'ai écrit un plugin pour vous permettre d'ajouter un retard dans la chaîne.

par exemple $ ('# div'). fadeOut (). delay (5000) .fadeIn (); // fade element out, wait 5 seconds, fade element in.

Il n'utilise pas de piratage d'animation ou de chaînage de rappel excessif, juste un code court simple et propre.

http://blindsignals.com/index.php/2009/07/jquery-delay/

1
chelfers

Vous pouvez éviter d'utiliser setTimeout en utilisant la méthode fadeTo () et en définissant un délai de 5 secondes à ce sujet.

$("#hideAfterFiveSeconds").click(function(){
  $(this).fadeTo(5000,1,function(){
    $(this).fadeOut("slow");
  });
});
1
Sampson