鼠标悬停时jquery连续动画

Question

我试图只有当鼠标在一个对象上时才能运行动画.我可以获得动画的一次迭代,然后在鼠标输出时恢复正常.但我希望动画能够在鼠标悬停时循环播放.我怎么做,使用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();