Partage

[Jquery] Répéter une liste d'animation à l'infini

Le 1 novembre 2013 à 18:59:11

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

Publicité
Le 1 novembre 2013 à 18:59:11
Le 2 novembre 2013 à 10:27:54

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

Je m'oppose à l'usage abusif de jQuery.
Le 4 novembre 2013 à 22:11:44

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 le 4 novembre 2013 à 23:30:25

[Jquery] Répéter une liste d'animation à l'infini

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown