jQuery Ticker

A lightweight jQuery plugin for animating a simple news ticker

View the Project on GitHub BenjaminRH/jquery-ticker


A lightweight jQuery plugin for animating a simple news ticker


  • Ticker item #1
  • Ticker item #2
  • Another ticker item

More news:
  • This is another ticker
  • You can have multiple tickers
  • Tickers are fairly flexible, require minimal markup, and can be styled independently


Include script after the jQuery library:

<script src="/path/to/jquery.ticker.js"></script>


Add an HTML tag (like a div or a span) with one unordered list containing the ticker items inside. Other content may be inside as well.

<div class="ticker">
        <li>Ticker item #1</li>
        <li>Ticker item #2</li>
        <li><em>Another</em> ticker item</li>

And initiate it


You can even add some styling

.ticker {
    width: 500px;
    margin: 10px auto;
 /* The HTML list gets replaced with a single div,
    which contains the active ticker item, so you
    can easily style that as well */
.ticker div {
    display: inline-block;
    word-wrap: break-word;

Ticker Options

Ticker attributes can be set globally by setting properties of the $.ticker.defaults object or individually for each call to ticker() by passing a plain object to the options argument. Per-call options override the default options.

$.fn.ticker.defaults = {
    random:        false, // Whether to display ticker items in a random order
    itemSpeed:     3000,  // The pause on each ticker item before being replaced
    cursorSpeed:   50,    // Speed at which the characters are typed
    pauseOnHover:  true,  // Whether to pause when the mouse hovers over the ticker
    finishOnHover: true,  // Whether or not to complete the ticker item instantly when moused over
    cursorOne:     '_',   // The symbol for the first part of the cursor
    cursorTwo:     '-',   // The symbol for the second part of the cursor
    fade:          true,  // Whether to fade between ticker items or not
    fadeInSpeed:   600,   // Speed of the fade-in animation
    fadeOutSpeed:  300    // Speed of the fade-out animation


Benjamin Harris