[JQuery]: effetto dissolvenza di più elementi cosnecutuvi

[trez]

Ciao a tutti,
devo ricreare un effetto dissolvenza per alcune news che devono apparire successivamente una dopo l'altra.
Il codice che ho realizzato è questo:

$(document).ready(function(){
    $("#news-scroller").css("opacity","0");
    var myArray = [
        "[url='']21° Mostra delle torte - 15 Giugno 2011[/url]",
        "[url='']Appuntamento sculturesco al locale - 6 Luglio 2011[/url]",
        "[url='']Mostra dei vulcani spenti - 43 Agosto 2066[/url]"
        ];
    
    $.each(myArray, function(i,val){
        $("news-scroller").html(val).stop().animate({ opacity: 1.0 }, 1500).delay(2000).animate({ opacity: 0 }, 1500);
        });
    
    });//DOM 

...ma non funziona.

L'elemento div con ID "news-scroller" è un semplice elemento div dove voglio che vi sia questo effetto dissolvenza, cambiando il suo contenuto con ciò che ho messo nell'array myArray.
Spero possiate aiutarmi!

Grazie!

[trez]

Il problema è che il ciclo è "troppo veloce" per l'animazione.
Mi servirebbe qualcosa che fermasse il ciclo e desse modo alle animazioni di proseguire (per poi ricominciare da capo, ovviamente).