Foros del Web » Programando para Internet » Jquery »

imagen que cambia y fade

Estas en el tema de imagen que cambia y fade en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/08/2016, 14:59
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 6 años, 1 mes
Puntos: 5
imagen que cambia y fade

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:
Ver original
  1. <img  id="foto4" src="imagen1.jpg"/>

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

Código Javascript:
Ver original
  1. var almacenFotos=['imagen2.jpg','imagen3.jpg'];/*para hacer el fade en la misma foto*/
  2.  
  3. $.each(almacenFotos,function (indice, valor)
  4.        
  5.            
  6.             {
  7.                 //alert("valor del indice "+indice+" : "+valor);
  8.                
  9.                 $("#foto4").fadeOut(2000);
  10.                
  11.                 $("#foto4").attr('src',valor).fadeIn(2000);
  12.                
  13.                
  14.                
  15.                
  16.                
  17.             }
  18.        
  19.        
  20.         );

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.

Última edición por BramSt; 02/08/2016 a las 15:10
  #2 (permalink)  
Antiguo 02/08/2016, 16:34
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 7 años, 10 meses
Puntos: 32
Respuesta: imagen que cambia y fade

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:
Ver original
  1. var duration = 1000;
  2. $.each(almacenFotos,function (indice, valor){
  3.   setTimeout(function(){
  4.     $("#foto4").fadeOut(2000, function(){
  5.         $("#foto4").attr('src',valor).fadeIn(2000);
  6.     });
  7.   }, duration);
  8.   duration = 5000;
  9. });
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
  #3 (permalink)  
Antiguo 02/08/2016, 17:14
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 6 años, 1 mes
Puntos: 5
Respuesta: imagen que cambia y fade

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
  #4 (permalink)  
Antiguo 02/08/2016, 17:20
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 7 años, 10 meses
Puntos: 32
Respuesta: imagen que cambia y fade

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
  #5 (permalink)  
Antiguo 02/08/2016, 18:07
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 6 años, 1 mes
Puntos: 5
Respuesta: imagen que cambia y fade

Cita:
Iniciado por andresgarciadev Ver Mensaje
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

Última edición por BramSt; 02/08/2016 a las 19:10

Etiquetas: fade
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:23.