使用jQuery减慢背景图像上的图像转换

Question

我使用CSS和jQuery创建了一个简单的背景幻灯片。你可以在这里看到它，代码如下。 http://codepen.io/anon/pen/PwrNyN

这样可以正常工作，但是我发现当前转换到另一个图像太快而且突然，并且想要减慢速度，所以变化更加优雅。

这可能吗？

HTML

<div class="header">
  <h1>This is some texst</h1>
<div>

的jQuery

var images=new Array(           
    'http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg',
  'http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg',
  'http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg'
);
var nextimage=0;
doSlideshow();

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

Answer 1

只需添加.header：

transition: background-image .5s ease-in-out;