Playing around making a jQuery ticker

by jackrugile

HTML

<div class="ticker">
    <div class="ticker-inner">            
        <p>News Item One. News Item One. News Item One. News Item One.</p>
        <p>News Item Two. News Item Two. News Item Two. News Item Two.</p>
        <p>News Item Three. News Item Three. News Item Three. News Item Three.</p>
        <p>News Item Four. News Item Four. News Item Four. News Item Four.</p>
        <p>News Item Five. News Item Five. News Item Five. News Item Five.</p>
    </div>
</div>

CSS

body {
    background-color: #e6e6e6;
    background-image: -webkit-linear-gradient(#eee 50%, transparent 50%),
                      -webkit-linear-gradient(left, #eee 50%, transparent 50%);
    background-size: .25em .25em;
    font-size: 100%;
}
div.ticker {
    background-color: #d6d6d6;
    background-image: -webkit-linear-gradient(#ddd 50%, transparent 50%),
                      -webkit-linear-gradient(left, #ddd 50%, transparent 50%);
    background-size: .25em .25em;
    border: 1px solid #bbb;
    border-radius: .5em;
    box-shadow: inset 0 1px 9px hsla(0,0%,0%,.25),
                0 -2px 2px hsla(0,0%,0%,.05),
                0 2px 2px hsla(0,0%,100%,.75);
    height: 3em;
    margin: 50px;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
    width: 370px;
}
div.ticker:after {
    background: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,100%,.2) 50%, transparent 50%);
    border-radius: .5em;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
div.ticker p {
    color: #555;
    font: 1em/3em Georgia, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px hsla(0,0%,0%,.25);
    white-space: nowrap;
}

div.ticker-inner {
    position: relative;           
}

JavaScript

var ticker = $('div.ticker'),
    tickerInner = ticker.find('.ticker-inner'),
    tickerHeight = ticker.height(),
    tickerDelay = 3000,
    tickerSpeed = 1500,
    tickerInterval,
    tickerAnimate;

tickerAnimate = function(){
    tickerInner.animate({'top' : '-='+tickerHeight}, tickerSpeed, function(){
        $(this).find('p').first().appendTo(tickerInner);
        tickerInner.css('top', 0);
        tickerInterval = setTimeout(tickerAnimate, tickerDelay);
    });
}
    
setTimeout(tickerAnimate, tickerDelay);

// Need to stop the ticker?
// clearTimeout(tickerInterval);