slide background cover and change the covered background image

i have a div with an image background, another div above starting with transparent. I want to slide in a faded png background in the duiv above, change the background and slide out to show it.

i have coded this, the problem is the sequence. the structure slide_in, change background, slide_out is mixed randomly.

var step = 20;                 // How many pixels to move per step
var current = -1920;            // The current pixel row
var imageWidth = 1920;        // Background image width
var headerWidth = 960;        // How wide the header is.
var init;

function slide_in(){
    current += step;
$('#bgfade').css("background-position",current+"px 0");
if(current==0) clearInterval(init);
}

var outstep = 20;                 // How many pixels to move per step
var outcurrent = 0;            // The current pixel row
var outimageWidth = 1920;        // Background image width
var outheaderWidth = 960;        // How wide the header is.
var outinit;

function slide_out(){
outcurrent -= step;
$('#bgfade').css("background-position",outcurrent+"px 0");
if(outcurrent==0) clearInterval(outinit);
}

$('#bgfade').click(function(){        
init = setInterval(slide_in, 1);
$('#bg').css('background-image','url(images/photo2.jpg)');
outinit = setInterval(sli开发者_开发百科de_out, 1);
});

As the click event occurr, the first thing happens is the image is changed after it the background starts to slide out but it had never slide in

i found a solution using this plugin: http://www.protofunc.com/scripts/jquery/backgroundPosition/