Le liste HTML non sono altro che speciali collezioni di elementi. jQuery ci permette di operare su queste collezioni con molta facilità e di creare effetti visuali interessanti.
Possiamo creare una funzione ricorsiva che, sfruttando un contatore interno incrementale, selezioni di volta in volta una voce della lista e la animi:
$(document).ready(function () {
var j = 0;
var delay = 2000;
function cycleThru() {
var jmax = $("ul#cyclelist li").length - 1;
$("ul#cyclelist li:eq(" + j + ")")
.animate({
"opacity": "1"
}, 400)
.animate({
"opacity": "1"
}, delay)
.animate({
"opacity": "0"
}, 400, function () {
(j == jmax) ? j = 0 : j++;
cycleThru();
});
};
cycleThru();
});
Il codice lavora sull'opacità dell'elemento utilizzando il seguente pattern:
- visibile
- ritardo di 2 secondi
- invisibile
- chiamata ricorsiva alla funzione e incremento o azzeramento del contatore