Galería de imágenes de JQuery efectos de fundido no funcionales.

Aquí hay un sencillo script de galería de imágenes para incluir y desvanecer divs con imágenes de fondo. Es lento y no funciona correctamente.

  • Parece que todas las imágenes aparecen y desaparecen juntas sin ninguna animación.
  • Esta galería debería desvanecer cada imagen en la siguiente.

    function gallery() { timerp = window.setInterval(function() { $('.cornerimg').fadeOut(2000); if ($('.cornerimg:visible') == $('.cornerimg').last()) { $('.cornerimg').first().fadeIn(2000); } else { $('.cornerimg').next().fadeIn(2000); }; }, 6000); } } 

¿Alguna idea de lo que le ha ido mal?

next() solo encuentra al siguiente hermano para el selector. No hace un seguimiento de dónde estás. Haría un setInterval y pasaría el índice actual junto con él. Por ejemplo:

 function gallery() { ind = 0; l = $('.cornerimg').length; $('.cornerimg').fadeOut(500); window.setInterval( function() { if ( ind > 0 ) $('.cornerimg').eq(ind-1).fadeOut(2000); if (ind == l) { ind = 0; } $('.cornerimg').eq(ind).fadeIn(500); ind++; }, 2000 ); } $(function() { gallery() }); 

Para evitar el desplazamiento de los elementos, agregue la función como callback a fadeOut lugar de que se fadeOut de forma asíncrona.

NOTA: Las variables globales no son la mejor manera de hacerlo en general, sino solo para darle una idea. La mejor forma es tener una función que se llame a sí misma con setTimeout y pase el argumento ind incrementado cada vez.

NO PROBADO.