Как остановить прокрутку текста?

Question

Это мой код:

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

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

Я не знаю, как остановить прокрутку текста, когда я помещаю курсор определенного названия.

DEMO

Answer 1

Используйте hover() очистить интервал и когда мышь листьев затем снова запустить тикер как,

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

Метод setInterval возвращает id значение, которое затем можно перейдите на номер clearInterval, чтобы отменить звонки на номер ticker().

Answer 3

Незначительное обновление в вашем ответе. Используйте функцию mouseover и out.

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

пожалуйста, попробуйте это:

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