jquery - 將動畫添加到背景圖像更改

Question

我使用的腳本更改了div（類.hmcarousel）的背景圖像和5個圖像的旋轉木馬 - 它似乎可以正常工作。不過，我需要爲每個轉換添加一個動畫淡化效果（目前是即時更改），但不知道將動畫腳本添加到哪個部分。非常感謝您的幫助。

jQuery(function ($) { 
    var body = $('.hmcarousel'); 
    var backgrounds = new Array(
    "url(soml_slider_1.jpg)", 
    "url(soml_slider_2.jpg)", 
    "url(soml_slider_3.jpg)", 
    "url(soml_slider_4.jpg)", 
    "url(soml_slider_5.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

您可以通過三個簡單的步驟來實現該效果。 1）淡出股利 2）更改背景 3）淡入股利

所以這會看起來像一個淡入淡出效果。所以，本質上你的功能看起來像：

function nextBackground() { 
body.fadeOut(1000); 
body.css(
'background', 
backgrounds[current = ++current % backgrounds.length] 
); 
body.fadeIn(1000); 
setTimeout(nextBackground, 5000); 
} 

所有最好的！乾杯!