Bonjour,

J'essaie de réaliser ce type d'animation: http://www.rezo-zero.com/

J'arrive à faire fonctionner les animations mais je n'arrive pas à la répéter.

Voici mon code:

$('.anim_fondu img').hide();

			function defile_fondu(){

				$('#logiciel_libre').fadeIn(1000);
				
				$('#logiciel_libre').fadeOut(1000).queue(function(){

							recursive_fondu(2);
					
						});
			}

			function recursive_fondu(i){

				var image_noir = $('.anim_fondu img:nth-child('+i+')');

				image_noir.fadeIn(1000);
				image_noir.fadeOut(1000).queue(function(){
					i++;

					if(i<8){
						recursive_fondu(i);
					}
					else{
						var image_noir = $('.anim_fondu img:nth-child(2)');
						//show fonctionne
						image_noir.show();
						//mais pas fadeIn
						//image_noir.fadeIn();

						//J'aimerai que tout recommence mais je n'y arrive pas
						//defile_fondu();
					}
				});

			}

			defile_fondu();

Dans le else de recursive_fondu j'ai essayé de rapeller la fonction defile_fondu mais cela ne fonctionne pas, ensuite j'ai remarqué que lorsque j'appelle fadeIn sur ma première image, cela ne fonctionne pas mais dès que j'utilise show là a marche!

en espérant que vous puissiez m'aider,

Cordialement,

sushis

Salut,

Je ne comprends pas le rôle de recursive_fondu().

Tu n'as besoin que d'une fonction. Dans cette dernière, tu fais ton animation et à la fin de cette dernière, tu rappelles ta fonction. A l'instar de cet exemple : http://fr.openclassrooms.com/informatique/cours/simplifiez-vos-developpements-javascript-avec-jquery/repeter-une-animation-sans-fin

Salut,

Le problème est que si je passe par une boucle comme ceci:

function defile_fondu(){

				$('#logiciel_libre').fadeIn(1000).fadeOut(1000).queue(function(){

							//recursive_fondu(2);
							for(var i=2; i<8; i++){
								
								var image_noir = $('.anim_fondu img:nth-child('+i+')');

								image_noir.fadeIn(1000).fadeOut(1000).queue(function(){
										i++;
								});
							}

							defile_fondu();
						});
			}

Et bien les animations se font en même temps alors c'est pour ça que je suis passé par une fonction récursive. Ensuite, ton exemple ne m'aide car il n'agit que sur un élément et avec la méthode animate.

EDIT: Bon j'ai laissé tomber et j'ai opté pour ça: http://jquery.malsup.com/cycle/basic.html

La librairie c'est http://malsup.github.com/jquery.cycle.all.js, il suffit de la rajouter dans le code et en 3 lignes c'est fait. 

ça donne ça:

$(".anim_fondu").cycle({
			fx : 'fade'
		});

Bon, il me reste à joué dans les options pour que ça soit plus rapide et qu'il ne touche pas à la taille de mes images mais c'est exactement ce que je voulais!

-
Edité par sushis 4 novembre 2013 à 23:30:25