Estoy intentando crear un fadeIn/Out efecto en un sitio que he creado (edit: URL del sitio suprimido)jQuery cambio div Imagen de fondo con fadeIn/salida
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!
Perdón por resucitar esto, pero esto desvanece todo el contenedor dentro y fuera, no solo la imagen de fondo. Esto es indeseable en la mayoría de los casos. – Alex