javascript - why my background-image transition is not working in firefox

I am trying to change the background image of an div without having any effect on the content inside the div. i wrote following code to change the background-mage. I didn't understand why firefox doesn't respond to my css transition. is there any fix by which i can make it to work in ie and 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();

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();

Share Improve this question edited Nov 12, 2013 at 3:08 Fendy Kusuma 6727 silver badges16 bronze badges asked Nov 12, 2013 at 3:00 user2847429

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

background-image animate property is not listed at w3c animatable list.

Try using some trick such as this.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - why my background-image transition is not working in firefox - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)