Question

I have a jquery image scroller which when reaches the last <li> appends the first <li> and so on. But when i am using hover instead of onclick it not working below is the code

  jQuery("#gallery-next").click(function () {
     next_scroll();
 });

 function next_scroll() {
     if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
         jQuery("#gallery").animate({
             left: "-=" + imageWidth + "px"
         });
     }
     if (jQuery("#gallery").position().left == stopPosition) {
         $("#gallery > li:first").appendTo("#gallery").fadeIn('slow');
         return false;
     }
 }

What should I do to make the mouseenter/hover work instead of click function. I have seen other solutions on this forum which is quite similar, but I am not able to utilize those. So please answer with a code. That will be much helpful.
Here is a link to check Fiddle
Thanks in advance

Answer 1

If I understand the question, what you need is to change this:

jQuery("#gallery-next").click(function () {
    next_scroll();
});

for this one:

var timer = 0;
jQuery("#gallery-next").
mouseover(function () {
     //Call next_scroll() every two seconds
     timer = setInterval(next_scroll, 2000);})
.mouseout(function(){
     timer = clearInterval(timer);
});

Update: Is setInterval() not setTimeOut(), sorry about the confusion, check updated fiddle