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
302% JQuery
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
134% Python
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
36% 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
34% 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…
Guida allo Zend Framework
31% Zend
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …