Jquery: news ticker

Una soluzione semplice per creare un box in cui scorrano con effetti fade diverse notizie organizzate in lista non ordinata.
Attraverso il css definiamo dimensioni, bordi, posizione, sfondi, carattere etc del nostro box:

ul#ciclo { width:150px; height:200px; border: 1px solid #eee; position:relative; overflow:hidden; }
ul#ciclo li { font-size: 14px; padding: 20px; opacity: 0; position: absolute }

Richiamiamo le  librerie Jquery, qui l'articolo su come caricare automaticamente sempre la versione più aggiornata,e impostiamo lo script che realizzerà il ciclo di lettura degli elementi della lista:

$(document).ready(function() {

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#ciclo li").length -1;
             $("ul#ciclo li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

 });

Infine la lista che conterrà per ogni elemento la news da visualizzare, facendo attenzione ad assegnare ad ogni id degli elementi un numero progressivo incrementato:

<ul id='ciclo'>
<li id='ciclo1'><a href='#'>primo</a></li>
<li id='ciclo2'><a href='#'>secondo</a></li>
<li id='ciclo3'><a href='#'>terzo</a></li>
<li id='ciclo4'><a href='#'>quarto</a></li>

</ul>

Questo il link al sito dello sviluppatore Charles Harvey.