Effetto fade graduale in background

[Emiliano.Presti]

Buongiorno a tutti...
Sto cercando di realizzare un sito che ha come sfondo nel body delle immagini che si alternano in dissolvenza. Le immagini sono a tutto schermo e gestite tramite un div che si sovrappone al body stesso.

Il body ha un background-color #000000 e il div che si sovrappone ad esso ha come classe "backslider".

Io vorrei che scrollando con il mouse, il background cambia progressivamente fino a diventare nero. Cioè le immagini scompaiono e compare il nero del body. Non capisco un tubo di jquery, ma penso di aver intrapreso la via giusta.
Guardate un pò:

$(window).scroll(function () {
    var top = $(this).scrollTop();
    var opacity = 0;
    if (top > 3) {
        //TODO convert into percentage of window height        
        $(".backslider").css('opacity', opacity);
    } else {
        opacity = 1;
        $(".backslider").css('opacity', opacity);
    }
});

Ebbene, il passaggio al nero avviene, ma è istantaneo.
Vorrei che tutto cambiasse in effetto fade.
Ho provato ad usare la proprietà ANIMATE, ma evidentemente ho sbagliato qualcosa perchè non funziona.

Qualcuno può aiutarmi?
Grazie anticipatamente.
Emiliano

[Emiliano.Presti]

Ho risolto così, che grosso modo è quel che volevo io...

$(window).bind('scroll', function(){
    if($(this).scrollTop() > 500) {
        $(".backslider").fadeOut(800);
    }else{
        $(".backslider").fadeIn(800);
    }
});

Spero di essere d'aiuto a qualcuno.
Ciao