Question

How Could I add a fadeIn(); effect to the changing backg5round image on click? The current code below works but with no fade effect.

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

For a smoother experience, it would help to preload the image followed by changing the background-image. Here’s the below script on jsFiddle, with a slight change to accommodate the image sources:

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