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.

Copia codice 

$(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();
});
Piccolo codice per posizionare l’elemento con tutte le sue proprietà da aggiungere al foglio di stile
Copia codice 

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;
}
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
Copia codice 

<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>
Fine!

Demo live
⤽