鼠标hover时jquery连续动画

我试图只有当鼠标在一个对象上时才能运行动画。 我可以获得动画的一次迭代，然后在鼠标输出时将其恢复正常。 但我希望动画能够在鼠标hover时循环播放。 我怎么做，使用setInterval？ 我有点卡住了。

Answer 1

可以这样做：

$.fn.loopingAnimation = function(props, dur, eas) { if (this.data('loop') == true) { this.animate( props, dur, eas, function() { if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas); }); } return this; // Don't break the chain } 

现在，您可以这样做：

 $("div.animate").hover(function(){ $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300); }, function(){ $(this).data('loop', false); // Now our animation will stop after fully completing its last cycle }); 

如果您希望动画立即停止，您可以将hoverOut行更改为：

 $(this).data('loop', false).stop(); 

Answer 2

setInterval返回一个可以传递给clearInterval以禁用计时器的id。

你可以写下面的内容：

 var timerId; $(something).hover( function() { timerId = setInterval(function() { ... }, 100); }, function() { clearInterval(timerId); } ); 

Answer 3

我需要这个来为页面上的多个对象工作，所以我修改了一个小的Cletus的代码：

 var over = false; $(function() { $("#hovered-item").hover(function() { $(this).css("position", "relative"); over = true; swinger = this; grow_anim(); }, function() { over = false; }); }); function grow_anim() { if (over) { $(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim); } } function shrink_anim() { $(swinger).animate({left: "0"}, 200, 'linear', grow_anim); } 

Answer 4

考虑：

 
This is a test 

有：

 #anim { padding: 15px; background: yellow; } 

和：

 var over = false; $(function() { $("#anim").hover(function() { over = true; grow_anim(); }, function() { over = false; }); }); function grow_anim() { if (over) { $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim); } } function shrink_anim() { $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim); } 

您也可以使用计时器实现此目的。