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

那是我的代码，这行转换：'rotate（'+ now +'deg）无限' .. 如果我删除无限它适用于一个旋转，但我需要旋转无限.. 我必须用JS写它，我想......

Answer 1

试试这个，你应该设置“重复”值。 AnimateRotate（degree，repeatcount）。

在您的情况下，将repeatcount设置为“ 无限 ”。

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 2

这是另一个答案，一个使用complete函数的animate()回调而不是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 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.