Ciclare un elenco

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.

by Sergio Parilli

HTML

<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>https://jsfiddle.net/#save

CSS

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

JavaScript

$(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();
});