Souci en Jquery (niveau débutant)

Bonjour la communauté Alsacréation,

j'ai un souci de débutant en jquery sur une animation de div.

var delay_time = 2000;
    	$('#textehp1').fadeIn(150).animate({"right":"50px"},200).delay(delay_time).fadeOut(500);
	$('#textehp2').fadeIn(150).animate({"right":"50px"},200).delay(delay_time).fadeOut(500);
$('#textehp3').fadeIn(150).animate({"right":"50px"},200).delay(delay_time).fadeOut(500);

l'animation fonctionne, j'ai bien le fadeIn, l'animation et le fade out qui fonctionne, par contre les 3 animations sur mes div se lancent en même temps . Je solicite votre aide pour arriver à lire les 3 animations les unes à la suite des autres et pas en simultanée.

Merci.

Salut,

Il y a plusieurs moyen de procéder, mais le plus propre, je pense, serait d'utiliser le mécanisme de fallback fournis par les fonctions jQuery que tu utilises.

http://forum.alsacreations.com/topic-5-54522-1-Jquery-gestion-de-la-queue.html
http://api.jquery.com/fadeout/
http://api.jquery.com/animate/

Grosso modo ça lancera une fonction à la fin du traitement.

En espérant t'avoir aidé.

Par contre ça ne fonctionne plus avec Set interval. j'ai tous les div qui s'empilent les un au dessus des autres. J'essaie de faire boucler mon animation. ci-dessous mon code et le problème des calques qui s'empilent. Aucun souci sans le SetInterval mais ça ne boucle plus.
Je pense que le problème vient de SetInterval mais je trouve pas vraiment de solution

function anim() {
		
		$('#textehp1').fadeIn(150).animate({"right":"50px"},200).delay(2000).fadeOut('500', function(){
			$('#textehp2').fadeIn(150).animate({"right":"50px"},200).delay(2000).fadeOut('500', function() {
				$('#textehp3').fadeIn(150).animate({"right":"50px"},200).delay(2000).fadeOut('500');
			});
		  });
		};
	
	$(document).ready(function(){
setInterval('anim();',100);
});

</script>
<style type="text/css">
  .slidetxt {z-index:1; text-align:right;font-size:30px; font-style:italic; font-family:Georgia, 'Times New Roman', Times, serif; padding-top:56px; position:relative; display: none } 
    </style>

<div id="textehp1" class="slidetxt" >cing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molesti</div>
<div id="textehp2" class="slidetxt"> cing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molesti<br />
       </div>
 <div id="textehp3" class="slidetxt"> cing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molesti</div>

j'ai essayé sur 8000, je n'ai plus les calques qui se superposent mais l'animation mets 8 secondes à se lancer, existe-t-il une fonction spécifique qui permette de faire boucler une fonction (ou revenir au début du script) ? j'essaie juste de faire boucler l'animation en fait.

--EDIT-- en fait je me suis énormément fourvoyé à vouloir rechercher des fonctions, il me suffisait juste de rappeler ma fonction dans le dernier callback pour la faire boucler.

function anim() {
		
		$('#textehp1').fadeIn(150).animate({"right":"50px"},200).delay(400).fadeOut('500', function(){
			$('#textehp2').fadeIn(150).animate({"right":"50px"},200).delay(400).fadeOut('500', function() {
				$('#textehp3').fadeIn(150).animate({"right":"50px"},200).delay(400).fadeOut('500',anim);
			});
		  });
		};
	
	$(document).ready(function(){
anim();
});

Merci beaucoup Gili pour ton aide.
Modifié par Harlok (30 Dec 2014 - 17:13)