淡入效果对背景图像

Question

我如何添加一个fadeIn（）； 对点击的背景变化的背景效果如何？ 下面的当前代码有效，但没有褪色效果。

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

为了获得更流畅的体验，将有助于预加载图像，然后再更改背景图像。 这是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();
});