обложка фона для фона и изменение обложки фонового изображения

Question

У меня есть div с изображением фона, другой div выше, начиная с прозрачным. Я хочу скользить в выцветшем png фон в duiv выше, изменить фон и выскользнуть, чтобы показать его.

Я закодировал это, проблема в последовательности. структура slide_in, фон изменения, slide_out перемещается случайным образом.

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(slide_out, 1); 
}); 

Как occurr событие клик, первое, что происходит, изображение меняется после того, как фон начинает скользить, но она никогда не скользить в

Answer 1

я нашел решение с помощью этого плагина: http://www.protofunc.com/scripts/jquery/backgroundPosition/