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ò:

codice:
$(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