Change the body background image with fade effect in jquery

Hey i want to fade in a new background image let´s say every 60 seconds. I´ve set the background image like this:

body {background-image: url(background.jpg);}

Now i want to change it, so after 60seconds it changes to background2.jpg, then after 60 seconds to background3.jpg and so on..

I´ve found a lot of stuff without changing it in the body but just as an image... any quick solutions?

Thank you!

Re-UPDATE of the UPDATE:

Even NEWER Fiddle (without arguments.callee)

Changes:

• Javascript improvements
• CSS corrections (fits full page now)
• Added option for random sequence of images instead of sequential
• => Alternate version of NEWER Fiddle <= (if OP's img server is down)

BIG UPDATE

Took the meat of this code from this previous answer and added some bling (using my site background stash lol)

original fiddle :)

NEW Super Fiddle

Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}

You can use the setInterval method and switch between classes defined in your CSS which have different background-images:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 1000);

Fiddle

This example uses an interval of 1000 which is one second. You can change this value for whatever period of time you're looking for.

UPDATE

Noticed your question asked for a fade so I added a CSS3 property on body:

body
{
    transition: background 0.5s linear;
}

The fiddle has been updated.

Building on the answer from Dan-Nolan (formerly user506980), you can also assign the backgrounds to an array and then call each background from the array with a counter

jsFiddle Demo

Further, you can assign the setInterval function to a variable, and then use that variable later to stop the repeats.

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];
    
    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);
    
    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready