imagen que cambia y fade

[BramSt]

Hola a todos.

Estoy dando mis primeros pasos con jquery, y me gustaría ver si podéis ayudarem, porque hay algo que, por más que lo intento, no logro entender:

estoy intentando hacer que una etiqueta img vaya tomando diferentes imagenes de un array (son 3 imagenes), y que el cambio se haga mediante un fadeIn.

Lo que ocurre es que, por más que lo intento, sólo consigo que se vualice la ú,tima imagen del array. Sé que las imagenes cambian correctamente (o eso creo), por los resultados que arroja el alert del código.

Mi código es este:

Código HTML:

<img  id="foto4" src="imagen1.jpg"/>
 

Y el código jquery que debería ejecutar lo que quiero:

Código Javascript:

var almacenFotos=['imagen2.jpg','imagen3.jpg'];/*para hacer el fade en la misma foto*/
 
$.each(almacenFotos,function (indice, valor)
        
            
            {
                //alert("valor del indice "+indice+" : "+valor);
                
                $("#foto4").fadeOut(2000);
                
                $("#foto4").attr('src',valor).fadeIn(2000);
                
                
                
                
                
            }
        
        
        );
 

Parece como si el cambio de atributo src se ejecutara demasiado rápido, por un lado, de manera que apenas puede apreciarse a la vista...

De hecho, por otra parte, el alert que he dejado comentado, y que se ejecuta por cada elemento, demuestra efectivamente que las imagenes van apareciendo correctamente... lo que sucede es que es cuando se llega al último elemento del array, que se ejecutan todos los fade in...

No lo entiendo, la verdad. He probado con un for en vez de con el método each y ocurre lo mismo. Algo debe fallar en mi lógica pero no veo que es :(

Si podéis ayudarme os estaría muy agradecido.

[andresgarciadev]

es un poco dificil de explicar lo que pasa y cual es la solcion XD
el error basicamente es que el each se ejecuta al instante sin esperar a que lo primero ejecutado termine, asi que primero intentas mostras la imagen2, pero corre el siguiente each cortando eso y queriendo mostrar la imagen 3
lo que se debe hacer es dar un tiempo para que se vayan cambiando, el codigo que te dare lo hace con la funcion setTimeout

Código Javascript:

var duration = 1000;
$.each(almacenFotos,function (indice, valor){
  setTimeout(function(){
    $("#foto4").fadeOut(2000, function(){
        $("#foto4").attr('src',valor).fadeIn(2000);
    });
  }, duration);
  duration = 5000;
});
 

la verdad no lo eh probado asi que pueda que haya algun error de syntaxis xD, pero la logica es esta, basicamente la primera vez declaro la duracion como 1000 para que la imagen q tienes permanesca x 1 segundo, le digo que ejecute el fadeout que tomara dos segundos y el fadein que tomara otros dos, en la siguiente vuelta esto se cortaria, pero evito esto dandole un timeout de 5 segundos
no se si me di a entender xD perdon si es asi.... es un codigo simple y corto pero muy complicado de entender a la vez xD

[BramSt]

Muchas gracias compañero andres, pero la verdad no se si lo entiendo XD. El each qué pasa, que empieza a ejecutar el fadeIn y no espera a que acabe?

Es que me parece que con el for me pasaba algo parecido...

¿Te he entendido bien?

Esto de funciones llamando a funciones que veo tanto en jquery me está volviendo bastante loco, pero tiempo al tiempo supongo XD

[andresgarciadev]

haha si exacto, el each no espera a que termine el fadein para llamar al siguiente fadein, lo cual hace que solo paresca que funcione el ultimo each, que te muestra la 3° imagen

[BramSt]

Iniciado por andresgarciadev

haha si exacto, el each no espera a que termine el fadein para llamar al siguiente fadein, lo cual hace que solo paresca que funcione el ultimo each, que te muestra la 3° imagen

Gracias! algo voy entendiendo.

La verdad que tendré que pillarlo y darme de chocotones con él hasta que lo entienda. Creo que no queda otra.

¿Algún link interesante para esto de los fades y las transiciones?

¿Os organizáis de alguna forma para no volveros locos con tanto corchete y paréntesis y llamas a funciones dentro de funciones? XD