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

答案中的小更新。使用鼠标悬停和退出功能。

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

请尝试这个：

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

setInterval方法返回id值，然后您可以将其传递到clearInterval以取消对ticker()的调用。

如何停止文字滚动？

4 个答案: