[Résolu] Problème fadeIn() setTimeout()

Bonjour, je me présente à vous. Graphiste, je me met à javascript aprés longtemps avoir utilisé des choses très basiques de ce langage. Et là je butte sur la mise en place d'une fonction.

Je vous décris ce que je jeux :
-Je souhaite que les images se trouvant dans la div "image_view" apparaissent(avec fadeIn()) les une après les autres (avec setTimeout()).

Je n'arrive pas à mettre en place tout ça, les images apparaissent toutes en même temps.Si vous pouvez m'aider, ça me ferais bien plaisir.

Voici mon code :

<!--
	//Fonction Apparition
	var time;
	function Apparition(time) {
	  var imgs,i;
	  //Trouver les images dans la div image_view
	 imgs=document.getElementById('image_view').getElementsByTagName('img');
	//Apparition des images
  	  for(i=0;i<imgs.length;i++){	
	  
		$(imgs[0]).fadeIn(time);
		setTimeout("'"+$(imgs[i+1]).fadeIn(time)+"'",time*i);
		

	  }
	 };
$(document).ready( function () {
							 
	//lancement Trouver()

	Apparition(2000);


} ) ;
// -->

Merci d'avance
Modifié par Bloody Joy (23 Jan 2008 - 18:48)

Pourquoi avoir des $ dans le code ? Sinon, il faudrait que l'objet existe en dehors de l'execution du code je pense, donc il faudrait faire

imgs[0].fadeIn(time);
		setTimeout("document.getElementById('image_view').getElementsByTagName('img')["+i+1+"].fadeIn("+time+")",time*i);

Par contre je ne sais pas si le ...mg')["+i+1+"]... ne posera pas problème... Si c'est le cas, il faudra déclarer une variable avant et lui donner comme valeur i+1

Meric pour l'aide.

Sans les "$", le code ne fonctionne pas, fadeIn() devient undefined.
Dans la doc de jQuery, c'est très utilisé. DOC

En regardant mieux, j'ai vu qu'on pouvais lancer une fonction une fois que le fadeIn se termine.

Mon code donne ça pour le moment, plus de setTimeout :

 function Apparition() {
var imgs,i;
		 
		//Trouver les images dans la div image_view
		imgs=document.getElementById('image_view').getElementsByTagName('img')
			for(i=0;i<imgs.length;i++){
				
				//Cache les images
				$(imgs[i]).hide();
				//Apparition de la première image
				$(imgs[0]).fadeIn(1000, function () {
				//Apparition de la deuxième image								  
				$(imgs[1]).fadeIn(1000);});
			
			};
					 
		return false;
	};

$(document).ready( function () {

		Apparition();
} ) ;

ça me donne l'effet souhaité, il ne me reste plus qu'à le modifier pour ne pas à avoir à taper imgs[2], imgs[3], imgs[4]..., si il y a plusieurs images dans "image_view".[/i]

Ah je ne savais pas qu'il s'agissait d'une librairie spéciale (même si je posais des questions car je ne connaissais pas fadeIn...).
Sinon pour faire ta fonction qui va lancer l'image suivante, il te suffit de faire un appel récursif, tu donnes le tableau et l'indice de l'image courante.

function apparition_rec(tableau,indice) {
    if (indice < tableau.length) {  
       $(tableau[indice]).fadeIn(1000 ,apparition_rec(tableau,indice+1););
   } else {
      return ;
   }
}

Du coup dans ta fonction principale, tu n'auras plus qu'a faire l'appel a cette fonction avec l'indice 0
Modifié par Tsukaniki (23 Jan 2008 - 12:39)

Merci beaucoups, en modifiant un peu la dernière fonction que tu m'as donné, ça fonctionne à la perfection .

Voilà le code final :

// JavaScript Document

function apparition_rec(tableau,indice) {

    if (indice < tableau.length) {  

       $(tableau[indice]).fadeIn(500, function () {apparition_rec(tableau,indice+1);});

   } else {

      return ;

   }

}
	
	
 function Apparition() {
var imgs,i;
		 
		//Trouver les images dans la div image_view
		imgs=document.getElementById('image_view').getElementsByTagName('img')
			for(i=0;i<imgs.length;i++){
				var qui = (i+1);
				//Cache les images
				$(imgs[i]).hide();
				
				//Apparition des images
				apparition_rec(imgs,0);
				
				
		
			};

		return false;
	};

$(document).ready( function () {

		Apparition();
} ) ;

Encore merci [/i]

De rien