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);

Thats it! Tested with latest browsers only. Let me know your thoughts through comments!

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a Reply

Your email address will not be published. Required fields are marked *