How to trigger a repeated event by mouse hovering in JQuery?

Question

Hi All!

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

Start (and loop) the animation on mouseover, stop/pause the animation on mouseout?

Answer 2

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

Answer 3

I'm in the same predicament, I'm kind of new to jQuery too and am not following the steps to take by Sruly...can you explain?