CODEWITHSUNDEEP
javascriptjquery
Ivin Raj
Ivin Raj

Reputation: 3429

How do I stop text scrolling?

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 the text scrolling when I place the mouse over a particular title.

DEMO

Upvotes: 4

Views: 173

Answers (4)

user5227152
user5227152

Reputation:

please try this one:

$(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();
    });
});

Upvotes: 1

Umesh Sehta
Umesh Sehta

Reputation: 10683

Minor update in your answer. Use 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

Upvotes: 1

Dave Anderson
Dave Anderson

Reputation: 12294

The setInterval method returns an id value which you can then pass to clearInterval to cancel the calls to ticker().

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Use a hover() to clear the interval and when mouse leaves then again start the ticker like,

$(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

Upvotes: 1

Related Questions