Simple jQuery Message Ticker | Code Snippet #13

10 Jul , 2013  Code Snippets 

jQuery-Message-TickerCode Snippet #13: The code snippet creates a simple message ticker using jQuery. A simple and sliding jQuery message ticker for your website.

Message tickers are a very common element for a website and for web designer to show case their upcoming updates, upcoming news, upcoming events and the like. Message tickers can be used in web design to make the web design look dynamic. Twitter message ticker is a famous form of showing tweets using a Twitter message ticker.

In our example, we use simple set of jQuery instructions to create this message ticker, which is laid horizontally and ticks vertically in the upward direction with a sliding effect.

Check out the demo below:(Hover on the ticker to pause it)

The code snippet(jQuery Script):

The code snippet(HTML):

Explanation:

In the jQuery script, we have accessed the ticker by the class name “ticker”. The first list element on the top slides upward using the jQuery function “slideUp()“. Once the first list element goes away, the second list element comes up, whereas again the first element is made to slide down using the function “slideDown()” below.

We also set timer for the ticker to show the animation. You can change the ticker timer. Also, we have used the “hover()” function to stop the timer if mouse is hovered over the element or not. Once the mouse goes away from the ticker, the timer starts as well as the animation.

Hope you enjoyed this code snippet. More to come. Don’t forget to like our fan page.



, ,

Comments are closed.