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

淡化效果到背景图像

2 个答案: