Simplest jquery rotator

by cuhuak

HTML

<p>
    Lorem ipsum dolor sit <span id="rotate">
        <span class="rotate-item">
            0 tratata    
        </span>
        <span class="rotate-item">
            1 blablabla    
        </span>
        <span class="rotate-item">
            2 blablabla    
        </span>
    </span>
</p>

CSS

.rotate-item {
    display: none;
}
.rotate-item:first-child {
    display: inline;
}

JavaScript

(function($){
    $.fn.rotate = function(params){
        return this.each(function(index, el){
            var defaults = {
               interval : 2000
            };
            var items = $(this).find('.rotate-item');
            var options = $.extend({}, defaults, params);
            var i = 0;
            var length = items.length;
            
            if(length){
                setInterval(function(){
                    $(items[i]).fadeOut(function(){ 
                        i = (++i)%length;
                        $(items[i]).fadeIn();
                    });
                }, options.interval);
            }
        });
    };
})(jQuery);

$("#rotate").rotate({ 
    items : $('.rotate-item'), 
    interval : 5000  // in miliseconds
});