继续执行函数

Question

当您将鼠标悬停在按钮上时，我调整了一个 jQuery / Slide 来执行该功能，到目前为止一切正常。现在我们只需要鼠标悬停在按钮上继续运行函数，而不是只运行1次。

<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {
$('#next-column').mouseenter(function(next) {
    event.preventDefault();
    $('.table-container').animate({scrollLeft:'+=438'}, 'slow');
});
$('#previous-column').mouseenter(function(prev) {
    event.preventDefault();
    $('.table-container').animate({scrollLeft:'-=438'}, 'slow');        
});
});
});
</script>

<a id="previous-column" href="#"><img src="images/b-prev.png"></a>
<a id="next-column" href="#"><img src="images/b-next.png"></a>

有人可以帮忙吗？我正在谷歌搜索，但还没有找到如何做到这一点。 感谢您的关注。

Answer 1

只需为 mouseenter 事件添加超时并像这样为 scrollLeft 或 scrollRight 循环

var timeout;

$(document).ready(function() {
    $('#next-column').hover(function(event) {
        event.preventDefault();
        scrollLeft()
    }, function () {
        clearTimeout(timeout)
    });
    $('#previous-column').hover(function(event) {
        event.preventDefault();
        scrollRight()
    }, function () {
        clearTimeout(timeout)
    });
});

function scrollLeft() {
    $('.table-container').animate({scrollLeft:'+=152'}, 'slow');
    timeout = setTimeout(function(){scrollLeft()}, 1000)
}
function scrollRight() {
    $('.table-container').animate({scrollLeft:'-=152'}, 'slow');
    timeout = setTimeout(function(){scrollRight()}, 1000)
}

编辑

这是正确的：JSFIDDLE，我才明白为什么它只出现到 5 行，因为我忘记更改 css，它现在应该可以正常工作了