onclick event change background-image with fade transition

Question

Hi to all. I'm searching for a trip in jQuery for changing the background-image of the body (or of a 100%-height "wrapper" div) on a click event of a class element, with a cross-fade transition effect. Is it possible? Thank you in advance.

Answer 1

UPDATED 2 improved fade effect!

DEMO: http://jsbin.com/egoku4/7

CSS:

* {
  margin: 0;
  padding: 0
}
html , body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}  
#background{
    position:absolute;
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 0;
}

HTML:

<div><img id="background" src="image.jpg" alt="" /></div> 

JQUERY

var images = [ "home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg" ];

$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
        $('#background').parent().fadeOut(200, function() {
            $('#background').attr('src', 'http://l.yimg.com/g/images/'+image); 
              $(this).fadeIn(200);
        });
    });
});