Custom news ticker script using jQuery

First create a division and write all the tickers inside the “<li>” tags.

jQuery ticker example

<div>
  <ul id="news">
    <li>First news ticker text</li>
    <li>Second news ticker text </li>
  </ul>
</div>

Next, add some CSS to hide the <li> texts and style up your news box column as you like.

#news{
  height: 50px;
  overflow: hidden !important;
  border-bottom:#F00 1px dashed; margin:opx auto;
}

#news li {
  height: 50px;
}

Now a very simple jQuery script to bring your news ticker to life

//function to find the texts other then the first text

function newstick(){
  $('#news li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#news')).css('opacity', 1); });
}

// This will automatically call the next tickers for a time interval of 4 sec
setInterval(function(){ newstick() }, 4000);

That’s it! Tested with the latest browsers only. Let me know your thoughts through comments!