switching images using jquery

i can't get the following code to work:

$('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow");
$('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow");

Regardless of what image I put开发者_运维百科 in the first line, It always seems to replace it with the second line. So my first image is the same as the second image.

What i want is to fade out the first image, and then fade in a second image.

suggestions? thanks

You probably want the version of fadeOut that accepts a callback function:

$('#clicked_package')
    .css({"background-image" : "url(img/head_2.png)"})
    .fadeOut("slow", function () {
        $(this).css({"background-image" : "url(img/head_2_normal.png)"})
            .fadeIn("slow");
});

Example: http://jsfiddle.net/andrewwhitaker/VLRKy/