How to stop scrolling text?

Question

This is my code:

$(document).ready(function() {
    function ticker() {
        $('#ticker li:first').slideUp(function() {
            $(this).appendTo($('#ticker')).slideDown();
        });
    }

    setInterval(function(){ ticker(); }, 3000);
});

I don’t know how to stop scrolling text when I mouse over a specific heading.

Demo

Answer 1

Use hover () to clear the interval, and when the mouse leaves, run the ticker again, for example

$(document).ready(function () {
    function ticker() {
        $('#ticker li:first').slideUp(function () {
            $(this).appendTo($('#ticker')).slideDown();
        });
    }

    var clr = null;
    function animate(){
        clr=setInterval(function () {
            ticker();
        }, 3000);
    }
    animate();
    $('#ticker li').hover(function () {
        // clear interval when mouse enters
        clearInterval(clr);
    },function(){
        // again start animation when mouse leaves
        animate();
    });
});

Live demo

Answer 2

Minor update in your answer. Use the mouseover and out function.

$(document).ready(function() {
  function ticker() {
     $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
     });
  }

var ticke = setInterval(function(){ ticker(); }, 3000);
    $('#ticker li').mouseover(function() { 
          clearInterval(ticke);
      }).mouseout(function() { 
          ticke= setInterval(function(){ ticker(); }, 3000);
    });
 });

See here Demo

Answer 3

try the following:

$(document).ready(function () {
    function ticker() {
        $('#ticker li:first').slideUp(function () {
            $(this).appendTo($('#ticker')).slideDown();
        });
    }

    var clr = null;
    function animate(){
        clr=setInterval(function () {
            ticker();
        }, 3000);
    }
    animate();
    $('#ticker li').hover(function () {
        // clear interval when mouse enters
        clearInterval(clr);
    },function(){
        // again start animation when mouse leaves
        animate();
    });
});

Answer 4

The method setIntervalreturns a value idthat can then be passed in clearIntervalto cancel calls to ticker().