淡入淡出效果到背景圖片

Question

如何添加一個fadeIn（）;點擊時改變backg5round圖像的效果？下面的當前代碼有效，但沒有淡入淡出效果。

HTML

<div class="background"></div> 

CSS

.background {position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:repeat;background-position:center top;background-image:url(images/skins/BiblesandCommentaries.jpg);} 

JS

$('.selector').click(function() { 
    $('.background').css({'background-image':'url(images/skins/'+$(this).attr('href').replace('#', '') +'.jpg'+')'}); 
}); 

Answer 1

爲了獲得更流暢的體驗，這將有助於預加載圖像，然後更改背景圖像。 Here's the below script on jsFiddle，有輕微的變化，以適應圖像源：

$('.selector').click(function() { 
    var img = document.createElement('img'); 
    img.src = 'images/skins/'+$(this).attr('href').replace('#', '') +'.jpg'; 
    img.onload = function() { 
     $('.background').fadeOut(function() { 
      $(this).css({'background-image':'url('+img.src+')'}).fadeIn(); 
     }); 
    }; 
    return false; 
});​ 

Answer 2

爲背景當前CSS可以設置爲

.background { 
    visibility:hidden; 
} 


$('.selector').click(function() { 
    $('.background').css(....).fadeIn(); 
});