jQuery Girl
  1. jQuery Girl
  3. jquery retarde le suivi d’un lien
Intereting Posts
append une option pour sélectionner le menu au début du menu Pourquoi Asp.Net MVC 5 place-t-il @ Scripts.Render («~ / bundles / jquery») au bas de _Layout.cshtml? Y a-t-il un événement qui se produit après le collage? jQuery – Décochez les autres cases si une case spécifique est sélectionnée par l’utilisateur jQuery index () par rapport à tous les frères et sœurs visibles Appel ajax jQuery avec OpenWeatherMap – net :: ERR_CONNECTION_REFUSED Comment supprimer de manière récursive des objects nesteds contenant un tableau vide? input-group-addon avec bootstrap-select jQuery, change-event UNIQUEMENT lorsque l’utilisateur modifie lui-même une entrée Vérification des parameters de soumission de formulaire jQuery Lire le stream vidéo en direct sur le site Web jQuery .animate () marginLeft ne fonctionne pas dans IE8 et inférieur – argument invalide Comment puis-je supprimer et déplacer les arguments de fonction ultérieurs vers la gauche si un type d’object est exclu? jQuery bascule l’animation JQuery – Checkbox restant vérifié – système de filtrage simple

jquery retarde le suivi d’un lien

J’ai une courte animation basée sur css que je veux lire avant qu’un lien ne soit suivi (une carte insérée lors du chargement de la page disparaît après un clic). Actuellement, cependant, la page appelée se charge trop rapidement. Je veux pouvoir retarder brièvement le href d’être suivi.

Voici ce que j’ai 

$(document).ready(function() { $("#card").css("top","0px"); $(".clickit").click(function() { $("#card").css("top","-500"); }); });

La première ligne insère la carte au chargement de la page. Après cela, c’est l’appel de clic qui modifie le CSS, mais comme je l’ai dit, il doit y avoir une sorte de retard car la page se charge immédiatement, au lieu d’après l’animation. Le CSS qui est modifié ressemble à ceci: 

 #card { width: 400px; height: 500px; position: relative; top: -500px; -webkit-transition:all .5s; }

(oui, je sais que c’est webkit seulement en ce moment)

C’est un problème très similaire à cette question de 2008, mais je sais que jQuery a été mis à jour de manière significative depuis lors, donc je voulais voir s’il y avait une solution plus moderne.

Je vous remercie!

Puisque vous utilisez .css() et -webkit-transition: vous devrez utiliser setTimeout() pour différer le nouvel emplacement.

Essayez l’exemple en direct: http://jsfiddle.net/2WJH9/ 

 $(document).ready(function() { $("#card").css("top","0px"); $(".clickit").click(function() { $("#card").css("top","-500px"); // Added px to make it work, // or get rid of quotes -500 var href = $(this).attr('href'); // Delay setting the location for one second setTimeout(function() {window.location = href}, 1000); return false; }); });​

setTimeout() retardera le window.location de window.location pendant 1 seconde (1 000 millisecondes). Si vous souhaitez faire correspondre les .5 seconde à partir de -webkit-transition: remplacez-le par 500.

Vous pouvez preventDefault () sur le lien, puis utiliser la fonction animate de jQuery pour effectuer vos transitions CSS, en suivant le lien une fois l’animation terminée. 

 $('.clickit').click(function(e) { e.preventDefault(); href = $(this).attr('href'); $('#card').animate( { top: '-500px' }, 500, function() { window.location = href; }); });

C’est un problème très similaire à cette question de 2008, mais je sais que jQuery a été mis à jour de manière significative depuis lors, donc je voulais voir s’il y avait une solution plus moderne.

Non, toujours la même réponse. Annulez l’événement, puis chargez l’emplacement vous-même plus tard.