jQuery cambio div Imagen de fondo con fadeIn/salida

Question

Estoy intentando crear un fadeIn/Out efecto en un sitio que he creado (edit: URL del sitio suprimido)

Todo funciona muy bien excepto cuando se hace clic en uno de los colores en la paleta de colores, reemplaza la imagen sin ningún efecto.

Este es el pequeño script que escribí, que se activa al hacer clic en uno de los colores.

function changeImage(newColor) { 

    //var previousImage = $('#image-holder').css("background-image"); 

    $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')"); 
}; 

He intentado jugar con $('#image-holder').fadeOut(1500) y luego $('#image-holder').fadeIn(1500) pero actúa divertida ... que se desvanece el doble de la imagen.

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()}); 

Lo que me gustaría lograr es onclick en una caja de color, la imagen de fondo actual Fadeout mientras que la nueva imagen de fondo se desvanecerá en.

Sé que es más fácil de lograr que si yo hubiera Usé dos <img src="" /> y cambié su visualización/visibilidad, pero desafortunadamente no puedo modificar tanto el código HTML, así que estoy buscando una solución basada en jQuery.

¡Apreciar la ayuda!

Answer 1

La solución que funcionó para mí:

var image = $('#image-holder'); 
    image.fadeOut(1000, function() { 
     image.css("background", "url('images/design-" + newColor + ".jpg')"); 
     image.fadeIn(1000); 
    }); 

Answer 2

¿Por qué no utilizar jQuery para inyectar el marcado que necesita?

var $image_holder = $('#imageHolder'), 
    $carousel_container = $('<div/>').attr('id', 'carousel_container'), 
    images = ['first.jpg', 'second.jpg', 'third.jpg']; 

for (var i=0; i<images.length; i++) 
{ 
    $('<img/>').attr('src', images[i]).appendTo($carousel_container); 
} 

$carousel_container.insertAfter($image_holder); 
$image_holder.hide(); 

Answer 3

Es posible que desee probar algo como esto

Reemplazar

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");

con

$('#image-holder').animate({background : url('images/design-' + newColor + '.jpg') }, 3000);

Ajuste el 3000 si es necesario para aumentar la t la cantidad de tiempo en la animación.

totalmente no probado

Answer 4

var currentBackground = 0; 

var backgrounds = []; 

backgrounds[0] = 'images/BasePic1.jpg'; 

backgrounds[1] = 'images/BasePic2.jpg'; 

backgrounds[2] = 'images/BasePic3.jpg'; 

backgrounds[3] = 'images/BasePic4.jpg'; 

backgrounds[4] = 'images/BasePic5.jpg'; 

function changeBackground() { 

    currentBackground++; 

    if(currentBackground > 4) currentBackground = 0; 

    $('#image-holder').fadeOut(1500,function() { 
     $('#image-holder').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('#image-holder').fadeIn(1500); 
    }); 


    setTimeout(changeBackground, 5000); 
} 

$(document).ready(function() { 

    setTimeout(changeBackground, 5000); 

}); 

Answer 5

Este fue el único razonable que encontré a desaparecer una imagen de fondo.

<div id="foo"> 
    <!-- some content here --> 
</div> 

Su CSS; ahora mejorado con CSS3 transition.

#foo { 
    background-image: url('a.jpg'); 
    transition: background 1s linear; 
} 

Ahora intercambiar el fondo

$("#foo").css("background-image", "url(b.jpg)"); 

o hacerlo con javascript nativo

document.querySelector("#foo").style.backgroundImage = "url(b.jpg)"; 

Voilà, que se desvanece!

---

descargo de responsabilidad obvia: si su navegador no soporta la propiedad CSS3 transition, esto no va a funcionar.

Answer 6

La mayoría de las soluciones simplemente se desvanecen en el elemento, en lugar de en el fondo. Esto significa que su información está oculta mientras se carga el fondo, que a menudo no es lo que desea.

He escrito la siguiente solución, que funciona tomando su imagen de fondo y agregándola como una imagen al elemento. Luego se desvanece cuando se ha cargado todo el tiempo manteniendo visibles los elementos secundarios.

También agrega un gif de precarga que desaparece cuando se carga. Es posible que deba probar con una imagen más grande para ver esto en acción.

Código y violín/fragmento a continuación.

jQuery(document).ready(function() { 
 

 
    jQuery('.Loader').each(function(index, el) { 
 

 
    var sBG = jQuery(this).css('background-image'); 
 
    sBG = sBG.replace('url(', '').replace(')', '').replace('"', '').replace('"', ''); 
 

 
    jQuery(this).prepend('<img src="' + sBG + '" id="tmp_' + jQuery(this).attr('id') + '" class="BGImage" />'); 
 
    jQuery(this).css('background-image', 'url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif")'); 
 

 
    jQuery(".BGImage:not(.processed)").each(function() { 
 
     this.onload = function() { 
 

 
     var oElement = jQuery('#' + jQuery(this).attr('id').replace('tmp_', '')); 
 
     jQuery('#' + jQuery(oElement).attr('id')).css('background-image', 'none'); 
 
     oElement.removeClass('Loader'); 
 
     jQuery(this).fadeIn(3000); 
 

 
     } 
 
    }); 
 
    }); 
 

 
});

.Loader { 
 

 
    background-position: center; 
 

 
    background-repeat: no-repeat; 
 

 
    transition: background 0.5s linear; 
 

 
} 
 

 
.BGImage { 
 

 
    position: absolute; 
 

 
    z-index: -1; 
 

 
    display: none; 
 

 
} 
 

 
#Test { 
 

 
    height: 300px; 
 

 
    background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTMa7lFP0VdTl63KgPAOotSies-YQ3qSslOuXWE6FnFxJ_EfF7tsA); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="Test" class="Loader">Some text</div>