Question

I have a function that animates when a div is hovered on:

$('.left_scroll_button').hover(function(){
        $(".scrolling_list").stop().animate({scrollLeft: '-=5px'}, 1);
 });

This just animates the thing once. I want to repeat the animation continuously.. Is there some easy way to loop this? I tried to do this:

$('.left_scroll_button').hover.everyTime(10,function(){
    $(".scrolling_list").stop().animate({scrollLeft: '-=5px'}, 1);
 }); 

But this didn’t work. If anyone can hep, that would be great!

Answer 1

What about using the Complete Function of the animate method to make a recursive call? Could probably be cleaned up a bit but something like this:

$(function () {
  $('.left_scroll_button').hover(
    function(){
       var element = $(".scrolling_list");
          (function(){
              element
               .stop()
               .animate({left: '+=5px'}, 100, arguments.callee);
          }());
       }, 
      function(){
         $(".scrolling_list").stop();
      });
 });​

Here is an example I’ve thrown together in jsfiddle