jQuery Animate transform infinite

Question

I need to set infinite rotating but it doesn't work.

function AnimateRotate(angle) {
    var $elem = $('.icon-repeat');

    $({deg: 0}).animate({deg: angle}, {
        duration: 5000,
        step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg) infinite'
            });
        }
    });
}

That is my code, and this line transform: 'rotate(' + now + 'deg) infinite' .. if I remove infinite it works for one rotate, but I need to rotate infinite.. I have to write it in JS, I think...

possible duplicate of [Infinite rotation animation using CSS and Javascript](http://stackoverflow.com/questions/12019159/infinite-rotation-animation-using-css-and-javascript) — Paco Abato, Dec 16 '14 at 10:39
It works from 0 to 360.. and that rotates one time, but i need to rotate infinite times — user3809590, Dec 16 '14 at 10:43
http://jsfiddle.net/sUHKh/159/ to rotate like that but with code in JS — user3809590, Dec 16 '14 at 10:44

Nandhakumar · Answer 1 · 2014-12-16T11:10:46.093

Try this, You should set the "repeat" value. AnimateRotate(degree, repeatcount).

In your case set the repeatcount as "infinite".

function AnimateRotate(angle,repeat) {
    var duration= 1000;
    setTimeout(function() {
        if(repeat && repeat == "infinite") {
            AnimateRotate(angle,repeat);
        } else if ( repeat && repeat > 1) {
            AnimateRotate(angle, repeat-1);
        }
    },duration)    
    var $elem = $('.icon-repeat');

    $({deg: 0}).animate({deg: angle}, {
        duration: duration,
        step: function(now) {
            $elem.css({
                'transform': 'rotate('+ now +'deg)'
            });
        }
    });
}
AnimateRotate(45,"infinite");

Here the demo

vyrp · Answer 2 · 2016-11-05T05:22:11.740

Here goes another answer, one that uses the complete callback of the animate() function instead of setInterval(), and that can be canceled:

function rotateForEver($elem, rotator) {
    if (rotator === void(0)) {
        rotator = $({deg: 0});
    } else {
        rotator.get(0).deg = 0;
    }

    return rotator.animate(
        {deg: 360},
        {
            duration: 5000,
            easing: 'linear',
            step: function(now){
                $elem.css({transform: 'rotate(' + now + 'deg)'});
            },
            complete: function(){
                rotateForEver($elem, rotator);
            },
        }
    );
}

You would then use it like this:

$(function() {
    var $rotator = rotateForEver($('.icon-repeat'));
    $('#some-button-to-cancel').click(function() {
        $rotator.stop();
    });
});

This solution is great because you can update the element while rotating without affecting the animation. Thanks! — Mihai Galan, Apr 17 '23 at 19:29

score 0 · Answer 3 · answered Dec 16 '14 at 10:45

0

You can wrap it with setInterval():

function AnimateRotate(angle) {
    var $elem = $('.icon-repeat');
    setInterval(function(){
       $({deg: 0}).animate({deg: angle}, {
          duration: 5000,
          step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg) infinite'
            });
          }
       });
    }
}

and call it like:

AnimateRotate(360);

Updated demo as suggested by `bemol`.

answered Dec 16 '14 at 10:45

Jai

74,255
12
74
103

my code is good... i dont need setinterval... only INFINITE is not good... doesnt rotate when I add it – user3809590 Dec 16 '14 at 10:50
this code will work if you remove `infinite` (this one is for `animation` not for transform) and add set interval to `5000` (same as duration) – paulitto Dec 16 '14 at 10:54
I know that that code works if remove infinite, but I need to do that idea... idea is to rotate infinite – user3809590 Dec 16 '14 at 10:55
thats why `setInterval` is here – paulitto Dec 16 '14 at 10:56

jQuery Animate transform infinite

3 Answers3

Updated demo as suggested by `bemol`.

Linked

jQuery Animate transform infinite

3 Answers3

Updated demo as suggested by bemol.

Linked

Updated demo as suggested by `bemol`.