Questo codice scorre una lista non ordinata con un ID di nome ‘bicycle’ in un box animato in una posizione specifica. Può essere usato su qualsiasi elemento con figli. Sostituire “ul#bicycle li” con gli elementi che si desidera passare.

[code lang=”javascript”] $(document).ready(function() {
var j = 0;
//millisecondi di ritardo tra gli elementi
var delay = 2000;
function cycleThru(){
var jmax = $("ul#bicycle li").length -1;
$("ul#bicycle li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
};
cycleThru();
});
[/code]
Piccolo codice per posizionare l’elemento con tutte le sue proprietà da aggiungere al foglio di stile
[code lang=”css”] ul#bicycle {
width: 200px;
border: solid;
position: relative;
overflow: hidden;
height: 200px;
}
ul#bicycle li {
font-size: 1.4em;
padding: 20px;
opacity: 0;
position :absolute;
}
[/code]
Il seguente codice HTML con l’elemento padre che contiene una lista non ordinata visualizzerà uno a uno i suoi elementi figli in un box definito nel foglio di stile
[code lang=”html”] <ul id="bicycle">
<li>11 Lorem ipsum dolor sit amet. </li>
<li>22 Ut enim ad minim veniam.</li>
<li>33 Duis aute irure dolor.</li>
<li>44 Excepteur sint occaecat.</li>
</ul>
[/code]
Fine!

Demo live