Quiero desvanecer las imágenes cuando hago este código:
$("#large-img").css('background-image', 'url('+$img+')');He intentado poner desvanecimiento en tantos lugares.
Gracias
Esto es probablemente lo que querías:
$('#elem').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + $img + ')'); }).fadeTo('slow', 1);Con un retraso de 1 segundo:
$('#elem').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + $img + ')'); }).delay(1000).fadeTo('slow', 1);¿Puedo ofrecer una solución alternativa?
Tuve el mismo problema y el desvanecimiento no funcionó porque desvaneció todo el elemento, no solo el fondo. En mi caso el elemento era el cuerpo, así que solo quería desvanecer el fondo.
Una forma elegante de abordar esto es clasificar el elemento y usar la transición CSS3 para el fondo.
transition: background 0.5s linear;
Cuando cambia el fondo, ya sea con toggleClass o con su código, $("#large-img").css('background-image', 'url('+$img+')'); se desvanecerá según lo definido por la clase.
Esta fue la única cosa razonable que encontré para desvanecer una imagen de fondo.
<div id="foo"> <!-- some content here --> </div>Tu CSS; ahora mejorado con transición CSS3 .
#foo { background-image: url(a.jpg); transition: background 1s linear; }Ahora cambia el fondo
document.getElementById("foo").style.backgroundImage = "url(b.jpg)";¡Voilà, se desvanece!
Descargo de responsabilidad obvio: si su navegador no es compatible con la propiedad de transition CSS3, esto no funcionará. En cuyo caso, la imagen cambiará sin transición. Dado que <1% de los navegadores de sus usuarios no son compatibles con CSS3, probablemente esté bien. No te engañes, está bien.