Цикл через список на jQuery

При помощи нижеприведенного небольшого фрагмента кода мы пробегаем через все элементы списка (li) неупорядоченного списка (ul) с идентификатором cyclelist. Вы можете использовать любой элемент с 'детьми'. Просто замените ul#cyclelist li на те элементы, которые вам надо 'прогнать' в цикле. Что делает наш цикл: поочередно показывает содержимое элементов списка.

javascript

$(document).ready(function() {

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     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();

 });

CSS

ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}

Данный код также преобразован в плагин.

Код плагина:

jQuery

(function($) {

    $.cycleThru = {
        defaults: {
            delay: 3000,

        }
    }
    $.fn.extend({
        cycleThru:function(config) {
            var config = $.extend({}, $.cycleThru.defaults, config);
            return this.each(function() {
                var delay = config.delay;
                var ulid = $(this).attr("id");
                var j = 0;
                var jmax = $(this).children("li").length -1;

                function cyclee(){
                    $("ul#" + ulid + " li:eq(" + j + ")")
                        .animate({"opacity" : "1"} ,400)
                        .animate({"opacity" : "1"}, delay)
                        .animate({"opacity" : "0"}, 400, function(){
                            (j == jmax) ? j=0 : j++;
                            cyclee();
                    });
                };
                cyclee();
            })
        }
    })
})(jQuery);