用jQuery动画切换背景图像

Question

当用户将鼠标悬停在div上时，我会使用下面的代码更改背景图像

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

工作正常，但如果用户仍然悬停在该div上，我希望背景图像再次更改（例如，2秒）。我尝试了下面的代码。

$(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);});
});