jQuery: How to make news ticker stop move when over on it

Question

Does anyone help me to make the news items stop moving when hover on it?

http://geschke.name/dev/newsticker/

Many thanks.

Answer 1

I believe you would do it like this:

$('ul#listticker').hover(pauseTicker, resumeTicker);

function pauseTicker() {
    clearInterval(interval);
}

function resumeTicker() {
    interval = setInterval(newsticker, pause);
}

Answer 2

You can do this by adding this to the same $(document).ready(function(){ });, or move function newsticker() outside the document.ready function, which would be a bit better.

$("#listticker").hover(function() {
  clearInterval(interval);
}, function() {
  interval = setInterval(newsticker, pause);
});

This cancels the interval when hovering, and resumes it when the mouse leaves.