Question

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

这是从未解决的评论的后续行动。在这里小提琴：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元素，并使用fadein按顺序控制其可见性。

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的背景图象

2 个答案: