2011-09-25 247 views
0

當用戶將鼠標懸停在一個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的延遲淡入。

回答

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

我對此沒有任何好運 – Connor

+0

嘗試在hover函數中移動setInterval。見上面 – CBRRacer

+0

var imgSrc =「space-image.png」; – braindamage