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
Selettori CSS definiti
9% Css
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
Interazione con i campi di un form con CSS
8% Css
Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera. In questo post vedremo come evidenziare il…
Creare capilettera con i CSS
7% Css
Scopriamo come può utilizzare i CSS per visualizzare la prima lettera di una notizia con una dimensione superiore al resto del testo, come in alcuni quotidiani o blogs. [expand title=”Due approcci possibili” startwrap=”” e…
Gli array in PHP non sono veri array
6% Php
Sono continuamente sorpreso dai programmatori in PHP che sostengono con le unghie e i denti che un “array” in PHP è un “array reale”. Questi stessi programmatori, che spesso programmano in almeno un altro linguaggio (JavaS…
Problemi di Internet Explorer con CSS
6% Css
Cercando di ottenere siti web CSS-based con lo stesso aspetto in tutti i browser spesso può essere difficile. Molti dei problemi invece si trovano con Internet Explorer che implementa dei comandi CSS diversamente da altri,…