Continue executing the function

Question

I adapted a jQuery / Slide to execute the function when you hover over a button, so far everything right. Now we just need to continue to run the function with the mouse over the button and not only run 1 time.

<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>

Can anyone help? I'm googling but have not found how to do this.   Thank you for your attention.

Answer 1

just add a timeout for mouseenter event and do a looping for scrollLeft or scrollRight like this

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)
}

Edit

here's the right one : JSFIDDLE, I just see why it only appear until 5 row because I forgot to change the css, it should work fine now