jquery - Simple loop/repeat on hover in jQuery?

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

您是否尝试过使用 setInterval 来建立动画循环？

Answer 2

使用animate方法的 Complete Function进行递归调用呢？可能会被清理一下，但像这样：

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

这是我在 jsfiddle 中汇总的示例