Estoy tratando de cambiar la imagen de fondo de undiv sin tener ningún efecto en el contenido dentro del div. Escribí el siguiente código para cambiar el background-mage. No entendí por qué Firefox no responde a mi transición CSS. ¿hay alguna solución por la que pueda hacer que funcione en ie y firefox?
Html
<body>
<header>
</header>
</body>
Css
body {
margin: 0;
}
header {
height: 665px;
width: 100%;
background-image: url("image0.jpg");
-moz-transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
}
Jquery
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.src = array[i];
preloadImages.list.push(img);
}
}
var imageURLs = [
"image0.jpg",
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg"
];
preloadImages(imageURLs);
var counterForBackgroundImage = -1;
function changeBackgroundImage() {
counterForBackgroundImage++;
if (counterForBackgroundImage > imageURLs.length-1)
counterForBackgroundImage = 0;
$("header").css("background-image", "url(" + imageURLs[counterForBackgroundImage] + ")");
setTimeout(function() {
changeBackgroundImage();
}, 5000);
}
changeBackgroundImage();
Respuestas
5 para la respuesta № 1la propiedad animada de la imagen de fondo no aparece en lista animable w3c.
Intenta usar algún truco como esta.