jquery - 文本代码在悬停时停止并保持不变

Question

在Codepen上，鼠标悬停时的 Html 代码停止并且保持不变。当鼠标处于文本状态时，它不会开始移动。

Answer 1

这应该可以解决您想要的问题：

http://codepen.io/anon/pen/djLnw

JS：

var width = $('.ticker-text').width(),
    containerwidth = $('.ticker-container').width(),
    left = containerwidth;

function tick() {
    if (--left < -width) {
        left = containerwidth;
    }
    $(".ticker-text").css("margin-left", left + "px");
    timeout = setTimeout(tick, 16);
}

$('.mousehover').mouseenter(function () {
    clearTimeout(timeout);
});
$('.mousehover').mouseout(function () {
    setTimeout(tick, 16);
});
tick();

Answer 2

这可能更容易

var width = $('.ticker-text').width(),
containerwidth = $('.ticker-container').width(),
left = containerwidth;
function tick() {
    if(--left < -width){
        left = containerwidth;
    }
    $(".ticker-text").css("margin-left", left + "px");
    timeout = setTimeout( function() { tick() }, 16);  
}
tick();
$('.mousehover').hover(function(){
  clearTimeout(timeout);
}, function(){
  tick();
}); 

做了一支笔：http ://codepen.io/anon/pen/Dwzpd