javascript - 悬停时循环旋转

Question

我试图让我的网站上的一些元素在悬停时循环旋转。我已经用 css 关键帧动画完成了它，但是当我将鼠标悬停或移出时，元素会丑陋地跳跃。

所以我尝试用一​​些奇特的 jQuery 来做到这一点(因为我已经将它加载到我的页面上)，我遇到了 this very helpful stack答案解释了如何通过悬停循环。但解释是为了运动。我设法通过悬停来移动它，但旋转会很酷(甚至可能两者，如果它可以处理的话)。

循环代码:

$.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
};

$("#animate").hover(function(){
     $(this).data('loop', true).stop().loopingAnimation({ 'margin-top': '50px'}, 500).loopingAnimation({'margin-top':'10px'},500);
}, function(){
     $(this).data('loop', false).stop();
     // Now our animation will stop after fully completing its last cycle
});

然后我遇到了another stack这解释了如何使用 jQuery 制作旋转动画，但现在我似乎无法将这两个代码融合在一起......

旋转代码:

$(document).ready(function (){

    $({deg: 0}).animate({deg: 90}, {
        duration: 2000,
        step: function(now){
            $("#rotate").css({
                 transform: "rotate(" + now + "deg)"
            });
        }
    });
}
);

我做了a pen with both codes让事情变得更容易。有谁知道怎么做吗？

Answer 1

下面这个怎么样？

function AnimateRotate(elt, d, duration, ondone){
    $({deg: 0}).animate({deg: d}, {
        easing: 'linear',
        duration: duration,
        step: function(now, fx){
            $(elt).css({
                 transform: "rotate(" + now + "deg)"
            });
        },
        complete: ondone.bind(elt)
    });
}

$.fn.loopingRotation = function(msPerRotation) {
    if (this.data('rotating') === true) // already rotating
        return;
    this.data('rotating', true);
    AnimateRotate(this, 360, msPerRotation, function() {
        if (this.data('rotating') !== true)
            return;
        this.data('rotating', false);
        $(this).loopingRotation(msPerRotation);
    });
}
$.fn.stopRotation = function() {
    this.data('rotating', false);
}

$("#rotate").hover(function(){
     $(this).loopingRotation(1000);
}, function(){
     $(this).stopRotation();
});