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.

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

Similari
Fondamentali di jQuery
267% JQuery
[nextpage title=”Benvenuti”] jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Python per tutti
121% Python
[nextpage title=”Copertina”] Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
Nuovi metodi in jQuery 1.6
32% JQuery
In questo articolo ci concentreremo sui nuovi metodi nella versione 1.6 della libreria jQuery JavaScript, così come i cambiamenti ai metodi già esistenti. Le informazioni fornite sono solo un riassunto veloce, raccomando u…
Oggetti Letterali con jQuery
29% JQuery
Si tratta di una traduzione di un articolo molto interessante originariamente apparso nel numero di marzo 2009 su JSMag, che descrive i passi a seguire per creare un Oggetto Letterale. [expand expanded=”true” title=”Usando…
25 Tricks in CSS da conoscere
28% Css
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …