javascript - Desvanecer/Aparecer imágenes de fondo sin fondo blanco

Quiero crear un sitio web con imágenes de fondo que cambien con el tiempo con un efecto de fundido de entrada/salida, pero no quiero usar el efecto de fundido de entrada/salida de jQuery existente porque cuando una imagen se desvanecía, aparecía un fondo blanco antes de que otra imagen se desvaneciera. Encontré un plugin llamado Maximage que se ajusta a mi solicitud, pero utiliza etiquetas img mientras que yo quiero trabajar con background-image en CSS (tengo una buena razón para hacer esto). ¿Alguien sabe cómo hacerlo?

Aquí está mi código HTML:

<div id="wrapper">
//My contain here
</div>

Aquí está mi código de JavaScript hasta ahora:

//Auto change Background Image over time
$(window).load(function() {
   var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
    var i = 0;

    function changeBackground() {
        $('#wrapper').fadeOut(500, function(){
            $('#wrapper').css('background-image', function () {
            if (i >= images.length) {
                    i = 0;
                }

                return 'url(' + images[i++] + ')';
            });
            $('#wrapper').fadeIn(500);
        })      
    }
    changeBackground();
    setInterval(changeBackground, 3000);
});

Ejemplo: http://www.aaronvanderzwan.com/maximage/examples/basic.html

Respuesta #1

¡AHH! ¡Finalmente! ¡Encontré una buena técnica! Estoy usando un envoltorio doble.

El problema en tu código es un poco lógico. No puedes hacer fadeOut y fadeIn al mismo tiempo en un solo contenedor.

Entonces la idea es crear dos envoltorios y alternar entre ellos de un lado a otro. Tenemos un envoltorio llamado: "wrapper_top" que encapsula el segundo envoltorio llamado: "wrapper_bottom". Y la magia estaba en colocar al lado del segundo envoltorio: tu contenido.

Así, teniendo la estructura lista que es la siguiente:

<div id='wrapper_top'>
    <div id='content'>YOUR CONTENT</div>
    <div id='wrapper_bottom'></div>
</div>

¡Luego un poco de JS+CSS y voilà! ¡Será dinámico con cualquier cantidad de imágenes!

Aquí está la implementación: http://jsbin.com/wisofeqetu/1/

Respuesta #2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){   
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);            
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;">  
      </div>
</body>
</html>