Can't ga a fade in a hover in jQuery

I would like to change the page background image of a page based on the mouse-over behavior of a visitor.

What’s the purpose? I would like to have a full screen photo with Supersized Jquery in the background. When a visitor goes over a button, I want the page to show another background image. I would like this background image to fade in.

The hover effect is located in a list. The image that need to fade is located in the body background. I already made the background change when I hover the list items. But i can't get the fade in.

The code I have at the moment:

$(document).ready(function()
 {
    var colorOrig=$("body").css('background-image');

$(".first").hover(
function() {
    $("body").css('background-image', 'url(images/foto-de-skater.jpg)');
}, function() {
    $("body").css('background-image', colorOrig);
});

$(".second").hover(
function() {
    $("body").css('background-image', 'url(images/girls.jpg)');

}, function() {
    $("body").css('background-image', colorOrig);
});

$(".third").hover(
function() {
    $("body").css('background-image', 'url(images/inter0507fumon开发者_JS百科iCurvaSudRoma1973.jpg)');
}, function() {
    $("body").css('background-image', colorOrig);
});});

The images I use are random chosen images.

I think you are refering to image opacity when a black background is behind the image. Am I right?

If so, then make a div element right after the declaration of body, and set the div you created to have the same size as body. Set body to have black background.
Then when you hover over .first, .second or .third it will change the image of the div instead of body. Example:

$(document).ready(function()
 {
    var colorOrig= $("#yourDiv").css('background-image');
    var imgOpacity = 0.5;

$(".first").hover(
function() {
    $("#yourDiv").css({ 'background-image': 'url(images/foto-de-skater.jpg)', opacity:imgOpacity });
}, function() {
    $("#yourDiv").css({ 'background-image': colorOrig, opacity:imgOpacity });
});

$(".second").hover(
function() {
   $("#yourDiv").css({ 'background-image': 'url(images/girls.jpg)', opacity:imgOpacity });

}, function() {
    $("#yourDiv").css({ 'background-image': colorOrig, opacity:imgOpacity });
});

$(".third").hover(
function() {
    $("#yourDiv").css({ 'background-image': 'url(images/inter0507fumoniCurvaSudRoma1973.jpg)', opacity:imgOpacity });
}, function() {
    $("#yourDiv").css({ 'background-image': colorOrig, opacity:imgOpacity });
});});

EDIT:

$(document).ready(function()
 {
    function fadeImage (img) {
        $("body").stop(true).animate ({ opacity: 0 }, 'fast', function () {
            $(this).css ('background-image', img).animate ({ opacity: 1 }, 'fast');
        });
    }
    var colorOrig=$("body").css('background-image');

$(".first").hover(
function() {
    fadeImage ('url(images/foto-de-skater.jpg)');
}, function() {
    fadeImage (colorOrig);
});

$(".second").hover(
function() {
    fadeImage ('url(images/girls.jpg)');

}, function() {
    fadeImage (colorOrig);
});

$(".third").hover(
function() {
    fadeImage ('url(images/inter0507fumoniCurvaSudRoma1973.jpg)');
}, function() {
    fadeImage (colorOrig);
});});

Latest fiddle: http://jsfiddle.net/7KWjz/21/ Full screen: http://jsfiddle.net/7KWjz/21/embedded/result/