CODEWITHSUNDEEP
jquery
Connor
Connor

Reputation: 1034

Switch Background Image with jQuery animate

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.

Upvotes: 0

Views: 757

Answers (1)

CBRRacer
CBRRacer

Reputation: 4659

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

Upvotes: 3

Related Questions