Question

When the user hovers over a div I have the background image change using the code below

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

That works fine but I want the background image to change again (in say, 2 seconds) if the user is still hovering over that div. I tried the code below.

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

Is that wrong…or should I use something like a delayed fading in of a new background div with a different background.

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