jQuery Animate 无限变换

Question

我需要设置无限旋转，但它不起作用。

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

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

这是我的代码，这一行 transform: 'rotate(' + now + 'deg) infinite' .. 如果我删除 infinite 它适用于一次旋转，但我需要无限旋转.. 应该是用JS写的吧，我觉得……

Answer 1

这里有另一个答案，它使用animate() 函数的complete 回调而不是setInterval()，并且可以取消：

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

然后你会像这样使用它：

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

Answer 2

试试这个，你应该设置“重复”值。 AnimateRotate(度数，重复次数)。

在您的情况下，将重复次数设置为“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

Answer 3

你可以用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'
            });
          }
       });
    }
}

然后这样称呼它：

AnimateRotate(360);

Updated demo as suggested by bemol.