jquery - 使用 jQuery 实现背景图像淡入淡出

Question

我有一系列图像作为 css background 属性循环播放幻灯片。下面的代码还应该让它们通过 jQuery 的 fadeIn 属性淡入和淡出，但由于某种原因它不会淡入淡出，而只是发生变化。有任何想法吗？

这是一条从 Unresolved 评论的后续内容。在这里 fiddle :http://jsfiddle.net/5fVZ7/6/

var images=new Array();
images[0]='http://s29.postimg.org/912bsm0mf/dataarancio.jpg';
images[1]='http://s27.postimg.org/y6tl17eb7/velocita.jpg';
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.bkg')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(500,function(){
    setTimeout(doSlideshow,4000);
});
}

Answer 1

.fadein 更改元素的不透明度，但您正在更改背景图像。动画只能作用于数值，浏览器无法计算 image1 和 image2“之间”的背景图像。因此，请尝试将图像作为单独的 html 元素叠加，并使用淡入淡出按顺序控制它们的可见性。