CODEWITHSUNDEEP
javascriptjquery
user5303478
user5303478

Reputation:

How do I stop text scrolling using jQuery

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.SEE HERE MY CODE

Upvotes: 0

Views: 87

Answers (3)

naman
naman

Reputation: 52

    $(document).ready(function() {
  var j= setInterval(function(){ ticker(); }, 3000);

      var i=1;
 function ticker() { 
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
        i++;
        if(i==4){
            alert("ok");
            clearInterval(j) ;
        }
    });


}
        });

you can set the limit of i and stop the script by using clearInterval() function.

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 1362

You can add the a new variable that will save the value for mouse entered

see your updated code 

$(document).ready(function() {
  var entered = false;
  $('#ticker').mouseover(function(){
        entered = true;
    })
  $('#ticker').mouseout(function(){
        entered = false;
    })
       function ticker() {
           if(!entered){
$('#ticker li:first').slideUp(function() {
    $(this).appendTo($('#ticker')).slideDown();
});
           }
}

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

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

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

DEMO

Upvotes: 2

Related Questions