jQuery 鼠标悬停时文字滚动条暂停

Question

我找到了这个文本代码：http://jsfiddle.net/4mTMw/8/

如何在鼠标悬停时暂停文本？

我试过了：

marquee.hover(function() {
    clearInterval(marquee);
    clearInterval(mar);
    marquee.css('animation-play-state', 'paused');
    mar.css('animation-play-state', 'paused');
    marquee.stop();
    mar.stop();
});

没有任何效果。

Answer 1

工作示例：https://jsfiddle.net/Twisty/qL93omsj/2/

JavaScript

$(function() {
  var marquee = $('div.marquee');
  marquee.each(function() {
    var mar = $(this),
      indent = mar.width();
    mar.marquee = function() {
      indent--;
      mar.css('text-indent', indent);
      if (indent < -1 * mar.children('div.marquee-text').width()) {
        indent = mar.width();
      }
    };
    mar.data('interval', setInterval(mar.marquee, 1000 / 60));
    mar.hover(function() {
      clearInterval($(this).data("interval"));
    }, function() {
      $(this).data('interval', setInterval(mar.marquee, 1000 / 60));
    });
  });
});

间隔被保存到数据中。您需要使用 clearInterval() 来暂停它。