jQuery Girl
  1. jQuery Girl
  3. Comment puis-je boucler cette animation indéfiniment?
Intereting Posts
Utilisation de skrollr par rapport à un élément, pas à la fenêtre Jquery ajoute une ligne juste en dessous de la ligne sélectionnée comment charger des données dans datatable que l’aide de la clé primaire GUID? Le gestionnaire d’événements de flou est bloqué par la méthode jquery preventDefault () Comment utiliser Json Jquery dans api.openweathermap pour obtenir des informations météorologiques jquery mobile autocomplete comportement différent à la page de chargement Formulaire AJAX (utilisant simple_form) avec validation d’erreur conservée fermer fancybox de jquery MVC4 & IClientValidatable – Appels AJAX automatiques à la validation côté serveur Ajouter une bordure inférieure et une couleur BG à l’aide de JQuery / CSS Diaporama jQuery avec temporisations aléatoires fonction de réussite ne se produisant pas avant AJAX complet La fenêtre contextuelle a cessé de fonctionner après la mise à jour de jQuery jQuery images qui se chevauchent pendant la transition (essayant de faire la transition de fond) affichage du message de survol de la souris sur certaines parties de l’image jquery / js

Comment puis-je boucler cette animation indéfiniment?

Je suis un peu nouveau sur jQuery et j’ai réussi à programmer une petite animation qui apparaît et disparaît progressivement.

Mon problème maintenant, c’est qu’après avoir fait le tour du cycle, il s’arrête. J’en ai besoin pour recommencer du début à la fin. Il faut juste continuer.

Voici le code 

$(document).ready(function() { $('img.banner1').fadeOut(5000); $('img.banner2').delay(1000).fadeIn(5000); $('img.banner2').delay(1000).fadeOut(5000); $('img.banner1').fadeIn(5000).delay(1000); });

Ce code relancera la fonction après le délai de 1000 ms après le démarrage du fadeIn final. Vous voudrez peut-être un délai plus long puisque vous prenez 5000 ms pour fondre cette bannière … 

 function animateBanners() { $('img.banner1').fadeOut(5000); $('img.banner2').delay(1000).fadeIn(5000); $('img.banner2').delay(1000).fadeOut(5000); $('img.banner1').fadeIn(5000).delay(1000).queue(animateBanners); } $(document).ready(function() { animateBanners(); });

Vous pouvez le déplacer vers une fonction et l’invoquer avec setInterval. 

 function AnimateBanners() { $('img.banner1').fadeOut(5000); $('img.banner2').delay(1000).fadeIn(5000); $('img.banner2').delay(1000).fadeOut(5000); $('img.banner1').fadeIn(5000).delay(1000); } $(document).ready(function() { setInterval(AnimateBanners, 10000); //Will run every 10 seconds });

Un séjour sans faille