Question

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

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

继续执行该功能

1 个答案:

修改