Looping rotation on hover

Question

I'm trying to make a few elements on my website rotate loopingly on hover. I've done it with css keyframe animation but when I mouse over or out, the element jumps uglingly.

So I'm trying to do it with some fancy jQuery (since I already have it loaded on my page) and I came across this very helpful stack which the answer explains how to loop with the hover. BUT the explanation is for movement. I managed to move it around with hover, but would be cool to rotate (maybe even both, if it can handle it).

Code for looping:

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

I then came across yet another stack which explains how to animate rotation with jQuery, but now I can't seem to be able to meld both codes together...

code for rotate:

$(document).ready(function (){

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

I made a pen with both codes to get things easier. Anyone knows how to do it?

If you want to rotate using jquery check out this library: https://code.google.com/p/jqueryrotate/ — Bla..., Aug 24 '14 at 04:06
I wish I didn't need to add more libraries to this website (its getting kinda crowded). Do you think it's the only way? — Digger, Aug 24 '14 at 04:12
Is this something like you want to do? http://jsfiddle.net/timspqr/uy7ZS/ — TimSPQR, Aug 24 '14 at 04:37
well, almost, @TimSPQR. The only diference is that I want to just tilt it a little and loop that tilt as long as the mouse is over the element. — Digger, Aug 24 '14 at 04:51

score 1 · Accepted Answer · answered Aug 24 '14 at 04:58

How about the following?

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();
});

You are a genius! I would never find this by myself! Just out of curiosity: if I want to rotate towards a direction and then rotate to the opposite direction the same amount, making it jiggle, how would I go about doing it? — Digger, Aug 24 '14 at 05:15

Looping rotation on hover

1 Answers1