如何在不褪色内容的情况下使用背景图像幻灯片放映的转换

Question

我想使用jQuery为背景图像幻灯片放映使用css转换。是否可以在不褪色div中的内容的情况下执行此操作？如果是，如何？请帮忙。这是我迄今为止没有转换的代码：

jQuery(window).load(function(){
var images = ['images/slide1.jpg','images/slide3.jpg','images/slide4.jpg','images/slide5.jpg','images/slide7.jpg',];
var i = 0;
var timeoutVar;
function changeBackground() {
    clearTimeout(timeoutVar); // just to be sure it will run only once at a time
    jQuery('#page').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
    });
    // call the setTimeout every time to repeat the function
    timeoutVar = setTimeout(changeBackground, 5000);
}
// Call it on the first time and it will repeat
changeBackground();        
});

Answer 1

这当然是可能的；您必须使用CSS transition属性。

只需添加此CSS:

#page {
    transition: background-image .7s ease-in-out;
   -moz-transition: background-image .7s ease-in-out;
   -webkit-transition: background-image .7s ease-in-out; 
   -o-transition: background-image .7s ease-in-out; 
}

每次更改#pagediv的background-image属性时，都会触发一个持续时间为0.7秒的动画（您也可以根据需要更改该值）。

这是一把小提琴。

编辑：这只适用于基于webkit的浏览器。如果我能找到一个跨浏览器的解决方案，我会编辑它。