Javascript Girl
  1. Javascript Girl
  3. JQuery ajax, attendez avant l'arrivée de l'animation
Intereting Posts
Comment cibler tout le texte d'entrée et la valeur du mot de passe? Comment obtenez-vous la hauteur rendue d'un élément? Événement pour déterminer quand innerHTML a chargé Modification du titre de la page avec Jquery Combinez deux sélecteurs avec un objet jQuery Comment charger des sources d'informations sur les bibliothèques à l'aide d'un webpack HTML5 et Javascript: ouverture et lecture d'un fichier local avec API de fichiers Comment appeler la fonction jquery dans la page .aspx pour les commandes usercontrols dans asp.net? JQuery – comment attendre l'événement 'fin' de 'redimensionner' et seulement alors effectuer une action? Javascript pour afficher la date et l'heure actuelles La portée isolée des directives ne fonctionne pas correctement avec des vues imbriquées? (AngularJS / UI Router) Comment importer une partie de l'objet dans les modules ES6 Questions sur l'hissage de Javascript Comment puis-je obtenir l'élément ciblé précédemment en JavaScript? Dollar signe-t-il une fonction anonyme auto-déclarante en JavaScript?

JQuery ajax, attendez avant l'arrivée de l'animation

HTML et CSS: 

<a href="#">link</a> <img src="http://2.bp.blogspot.com/_OIHTbzY7a8I/TOaiTKLqszI/AAAAAAAAAHM/eb3iiOqxzKg/s640/Auto_Audi_Audi_concept_car_005130_.jpg" /> <div></div> img { display: none; } a { display: block; }

JS: 

 $("a").click(function(){ $.ajax({ url: "test.php", contentType: "html", beforeSend: function(){ $("img").fadeIn(600, function(){ $("div").append(" | beforeSend finished | "); }); }, error: function(){ $("div").append(" | error | "); } }); return false });

Le problème est que error fonction d' error commence, avant que l'animation de la fonction beforeSend ne soit terminée.

Voici l'exemple de travail http://jsfiddle.net/H4Jtk/2/

error devrait commencer à fonctionner uniquement lorsque beforeSend est terminé. Comment faire cela?

beforeSend fonction beforeSend pour lancer l'animation des blocs quand ajax commence. Je ne peux pas l'enlever.

Merci.

Vous pouvez utiliser un événement personnalisé pour attendre que l'animation soit terminée, comme ceci: 

 $("a").click(function(){ var img = $("img"), div = $("div"); $.ajax({ url: "test.php", contentType: "html", beforeSend: function(){ img.fadeIn(600, function(){ div.append(" | beforeSend finished | "); div.trigger("animationComplete"); }); }, error: function(){ if(img.is(':animated')) { div.one("animationComplete", function() { div.append(" | error | "); }); } else { div.append(" | error | "); } } }); return false });

Remarques:

  1. jQuery.one() attache un gestionnaire d'événements qui déclenche une fois et est ensuite supprimé.
  2. jQuery.is(':animated') est un sélecteur personnalisé fourni par jQuery pour déterminer si un élément est animé en utilisant les méthodes d'animation intégrées de jQuery (par exemple, fadeIn ).

Nouveau jsFiddle: http://jsfiddle.net/pgjHx/

Dans les commentaires, Happy a demandé comment gérer plusieurs animations. Une façon serait d'ajouter une condition au gestionnaire d'événements animationComplete pour voir si l'animation est en cours. Par exemple: 

 $("a").click(function(){ var img = $("img"), div = $("div"); $.ajax({ url: "test.php", contentType: "html", beforeSend: function(){ img.fadeIn(600, function(){ div.append(" | beforeSend finished | "); div.trigger("animationComplete"); }); // Add another animation just to demonstrate waiting for more than one animation img.animate({ marginTop: '-=5', opacity: '-=.5' }, 700, function() { div.trigger("animationComplete"); }); }, error: function(){ if(img.is(":animated")) { // Note I've switched to bind, because it shouldn't be unbound // until all animations complete div.bind("animationComplete", function() { if(img.is(":animated")) { return; } div.append(" | error | "); div.unbind("animationComplete"); }); } else { div.append(" | error | "); } } }); return false });

tu peux le faire

// exécutez votre animation sur le clic de lien, et lorsque l'animation est terminée, // commencez ensuite votre demande ajax. 

 $("a").click(function () { $("img").fadeIn(600, function () { $("div").append(" | beforeSend finished | "); $.ajax({ url: "test.php", contentType: "html", error: function () { $("div").append(" | error | "); } }); return false }); }); });

La chose est que "beforeSend" est terminé – il sortira bien avant que "fadeIn" ne soit terminé. Je ne sais pas ce que vous essayez d'accomplir, donc il est difficile d'offrir une solution. Vous devriez attendre pour démarrer l'opération ajax jusqu'à ce que la séquence d'animation (la "FadeIn") soit terminée si vous vouliez garantir que cela se produirait d'abord.