有没有办法用步骤递归调用 jQuery animate() ？

Question

我有以下功能，我想连续制作图像动画作为 IE9 的 CSS 动画的后备。

问题是它旋转一次然后递归 now 总是等于 360。它再也不会从 0 开始。

谢谢:)

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

Answer 1

尝试

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>

有没有办法用步骤递归调用 jQuery animate() ？

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

javascript

jquery

jquery-animate