Question

I was building a simple carousel list for learning purpose.

In some carousel samples, if u hover muse on the prev or next button, the list starts scrolling, as if a repeating click event was being passed to the prev and next buttons.

Now, in my carousel, i have prev and next buttons that will slide up and down the list. Now i wish to implement the hover effect. But stuck with the events 🙁 My idea was on mouse over, i should trigger the click event, but the event is fired only once, while i want it to be fired repeatedly as long as the mouse stays on the button.

How can i do that? And what will be the best approach of doing this hover effect?

Thanks in advance,
Anjan

Answer 1

In the mouseover event (or the first method of the hover event) you start a timed function that causes the scroll and in the mouseout event (or the second method of the hover event) you stop the timed function

var interval;
    $('#arrow').hover(function() {
        interval = setInterval(animationmethodname, speed);
    },
    function() {
        clearInterval(interval);
    });

this code should work using set interval. Also check out alternatives using loops and setTimeout()