切換背景圖像動畫

Question

當用戶將鼠標懸停在一個div我用下面

$(document).ready(function(){ 
$("#f1_container2").hover(function(){ 
    $(".photobg").fadeIn(800); 
}, 
function(){ 
    $(".photobg").fadeOut(800); 
}); 
}); 

這工作正常代碼中的背景圖片變化，但我想要的背景圖像再次更改（中說，2秒）如果用戶仍然懸停在該div上。我嘗試了下面的代碼。

$(document).ready(function(){ 
$("#f1_container2").hover(function(){ 
    $(".photobg").delay(2000).animate({"background":"#000 url(space-image.png) center center fixed no-repeat"}, 0); 
}), 
}); 

是這樣的錯誤...或者我應該使用類似於具有不同背景的新背景div的延遲淡入。

Answer 1

$(document).ready(function(){ 
var imgSrc = "space-image.png"; 
$("#f1_container2").hover(function(){ setInterval($(".photobg").fadeOut('2000', function(){$(".phtobg").css("background-image", "url(" + imgSrc + ")"); }).fadeIn(), 1000);}); 
});