Carousel 2.0

HTML

<div class="ticker" style="position:relative">
    <ul>
        <li>We have now teamed up with Microsoft<br />sdflkjasdlfjasdf<br />sdflkjasdlfjasdf<br />sdflkjasdlfjasdf<br />sdflkjasdlfjasdf<br />sdflkjasdlfjasdf</li>
        <li>We have just introduced a developer plan</li>
        <li>Web interface pro is coming soon, stay tuned</li>
        <li>Like our facebook page now and help spread the word</li>
        <li>Some other news thingie here</li>
    </ul>    
</div>

CSS

.ticker {
    position: relative;
    height: 50px;
    overflow: hidden;
}

.ticker ul {
    height: 250px;
    overflow: hidden;
    list-style-type: none;
    margin: 0;
}

.ticker ul li {
    height: 50px;
    margin: 0;
    overflow: hidden;
}

JavaScript

(function ($) {    
    $.easing.easeOutExpo = function (x, t, b, c, d) {
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    };
    $.easing.easeInExpo = function (x, t, b, c, d) {
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    };    
    $.fn.newsTicker = function (options) {
        
        var s = $.extend({
                    slideUpSpeed: "slow",
                    fadeOutSpeed: 500,
                    fadeInSpeed: 1500,
                    interval: 5000,
                    pauseOnHover: true,
                }, options )
        
        ,   $div = $(this)
        ,   $ul = $div.find("ul")
        ,   $li = $ul.find("li")
        ,   $lastElement = $li.last().addClass("last")
        ,   itemHeight = $li.first().height()
        ,   step = 0
        ,   itemLength = $li.length
        ,   $itemInView = $li.eq(step)
        ,   timeoutId = 0;
        
        $li.slice(1).css("opacity", 0);
        
        if (s.pauseOnHover) {
            $ul.on("mouseenter", function (e) {
                clearTimeout(timeoutId);
            }).on("mouseleave", function (e) {
                timeoutId = setTimeout(goTicker, s.interval);  
            });
        }

        var goTicker = function () {
               
            $itemInView.animate({
                opacity: 0 
            }, s.fadeOutSpeed)
            .next()
            .animate({
                opacity: 1 
            }, s.fadeInSpeed, "easeInExpo");
            
            // slide up by the height
            // of one list item
            $ul.animate({
                marginTop: "-=" + itemHeight + "px",
            }, s.slideUpSpeed, "easeOutExpo", function () {
                step++;
                $itemInView = $ul.find("li").eq(step);                
                if ($itemInView.hasClass("last")) {
                    // todo: hook to
                    // do something when final element is displayed 
                }
               ...