鼠标悬停jQuery的连续动画 [英] jquery continuous animation on mouseover

问题描述

我想有一个动画运行，只有当鼠标移动到一个对象。我可以得到动画的一个迭代，然后把它设回正常的鼠标了。但我想动画，鼠标悬停循环。我会怎么做，用的setInterval？我有点卡住了。

I am trying to have an animation run only when the mouse is over an object. I can get one iteration of the animation and then have it set back to normal on mouse out. But I'd like the animation to loop on mouseover. How would I do it, using setInterval? I'm a little stuck.

推荐答案

它可以这样进行：

$.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 行：

If you wanted the animation immediately stop, you could change the hoverOut line to read:

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

这篇关于鼠标悬停jQuery的连续动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！