背景图像以 jQuery 淡入淡出

Question

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

这是一条从未解决的评论的跟进。 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 改变元素的不透明度，但你正在改变背景图像。动画只能作用于数值，浏览器无法计算出 "between" image1 和 image2 的背景图像。因此，尝试将图像叠加为单独的 html 元素并使用淡入淡出来控制它们的可见性。

Answer 2

答案是将 if 语句和 css 属性更改包装在 fadeOut 函数中，如下所示：

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(){
  $('.bkg').fadeOut(500,function(){
    if(nextimage>=images.length){nextimage=0;}
    $('.bkg').css('background-image','url("'+images[nextimage++]+'")');
  });

  $('.bkg').fadeIn(500,function(){
    setTimeout(doSlideshow,4000);
  });
}

我认为这段代码比我发现的许多其他做同样事情的代码更简单、更有效，包括对评论中重复问题的回答。

背景图像以 jQuery 淡入淡出

Background image fading with jQuery

css

jquery

slideshow

fadein