jquery - 继续执行函数

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，现在应该可以正常工作了