JQuery的添加淡入淡出效果

Question

我想創建使用JQuery背景圖片更換，我迄今成功了，但是我對不確定如何或在哪裏我的代碼添加.fadeIn（）作用：

$(function() { 
    var body = $('.div-slideshow'); 
    var backgrounds = [ 
    'url(img/homeImg.jpg)', 
    'url(img/homeImg2.jpg)', 
    'url(img/homeImg3.jpg)' 
    ]; 
    var current = 0; 

    function nextBackground() { 
    body.css(
     'background', 
     backgrounds[current = ++current % backgrounds.length]); 

    setTimeout(nextBackground, 5000); 
    } 
    setTimeout(nextBackground, 5000); 
    body.css('background', backgrounds[0]); 
}); 

Answer 1

由於您使用的是同一個元素，只能更改背景，因此無法使用.fadeIn()。

這個CSS3過渡添加到您的.div-slideshow類

.div-slideshow { 
    transition: background 1s linear; 
} 

，如果你想你可以改變的過渡時間。

這樣，更改url屬性時，背景會自動過渡。