Is there a way to recursively call jQuery animate() with steps?

Question

I have the following function that I want to continously animate an image as fallback for CSS animation for IE9.

Problem is it rotates once then on recursion now always equals to 360. It never starts at 0 again.

Thanks :)

var App = {


    init: function() {
       console.log(Modernizr.cssanimations);
       this.rotateSpinners();
    },

    rotateSpinners: function() {
        $('.speed2').each(function() {
            App.rotate($(this));
        });
    },

   rotate: function(element) {

       //console.log('---');
       //console.log(element);

       $(element).stop(true, true).animate(
           {
               rotation: 360
           },
           {
               duration: 3600,
               step: function(now) {
                   $(this).css({"transform": "rotate("+now+"deg)"});
                   //counts up to 360, second run always returns 360 without counting
                   console.log(now); 
               },
               done: function() {
                   // tried to reset here
                   //$(this).css({"transform": "rotate(0deg)"}); 
                   App.rotate($(this));
               }
           }
       );

   }

};

App.init();

Take a look at this question: http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate — frenchie, Mar 31 '15 at 01:01
That was obviously redundant but removing the creation of the jQuery object didn't change the behavior :-/ — Markus, Mar 31 '15 at 07:15

guest271314 · Accepted Answer · 2015-03-31T01:07:00.847

Try

var App = {

    init: function() {
       // console.log(Modernizr.cssanimations);
       this.rotateSpinners();
    },

    rotateSpinners: function() {
        $(".speed2").each(function() {
            App.rotate(this);
        });
    },

    rotate: function(element) {
       // set, reset `element.style.rotation` at `0`
       element.style.rotation = 0;
       $(element).stop(true, true).animate(
           {
               rotation: 360
           },
           {
               // set `easing` at `linear`
               easing:"linear",
               duration: 3600,
               step: function(now) {
                   $(this).css("transform", "rotate(" + now + "deg)");               
                   console.log(now); 
               },
               done: function() {                     
                 App.rotate(this);
               }
           }
       );

   }

};

App.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="speed2">abc</div>

@Markus `rotation` set, reset to `0` at `element.style.rotation = 0;` before `.animatie()` called within `.rotate()` :) — guest271314, Mar 31 '15 at 15:03

Is there a way to recursively call jQuery animate() with steps?

1 Answers1