Text cross-fade

by karim79

HTML

<div class="ticker"></div>

JavaScript

var data = [
    "We are awesome, and have much chicken",
    "Check out the new blahblah",
    "Update: we are now affiliated with the NSA",
    "I am the danger",
    'Introducting our awesome <a href="http://google.com">Developer plan!</a>'
];

$.fn.ticker = function (options) {
    
    var settings = $.extend({
        fadeoutSpeed: "normal",
        fadeinSpeed: "normal",
        prerenderFirst: true,
        startFrom: 0,
        interval: 2000,
        freezeOnHover: true
    }, options ) 
    
    ,    items = options.items
    ,    $wrap = $(this)
    ,    $span = $('<span class="tickerItem"/>').appendTo($wrap)
    ,    tickerOffset = $span.offset()
    ,    itemCount = items.length
    ,    itemIndex = 0;
    
    if (settings.prerenderFirst) {
        $span.html(items[0]);
        itemIndex = 1;
    }
    
    if (settings.startFrom) {
        itemIndex = settings.startFrom;   
    }
    
    if (settings.freezeOnHover) {
        $wrap.on("mouseenter", "span.tickerItem", function (e) {
            clearTimeout(intervalId);   
        }).on("mouseleave", "span.tickerItem", function (e) {
            intervalId = setInterval(timerFunction, settings.interval);
        });
    }
    
    var timerFunction = function () {
        var $overlay = $('<span class="tickerItem" />')
            .css({
                 position: "absolute",
                 left: tickerOffset.left,
                 top: tickerOffset.top,
                 display: "none",
             })
             .html(items[itemIndex])
             .appendTo($wrap);
           
             $span.fadeOut(settings.fadeoutSpeed, function () {
                 $(this).remove();
             });
        
             $span = $overlay;
             $overlay.fadeIn(settings.fadeinSpeed);
            
             itemIndex = (++itemIndex === itemCount) ? 0 : itemIndex;        
    };
    
    
    var intervalId = setInterval(timerFunction, settings.interval);      
};

$(".ticker").ticker({items:...