jQuery的无限无限旋转动画

Question

我是第一次玩JS + CSS动画。 我正在尝试使用以下随机因素旋转div（或一堆独立地）：

• 随机方向
• 随机度
• 随机停顿

我设法收集了这个脚本，效果很好。 它将带有id =“ square” infinity的div旋转到[random]方向，旋转[random]度

    function redo() {  
    $.fn.animateRotate = function(angle, duration, easing, complete) {
            return this.each(function() {
            var $elem = $(this);

            $({deg: 0}).animate({deg: angle}, {
                duration: duration,
                easing: easing,
                step: function(now) {
                    $elem.css({
                        transform: 'rotate(' + now + 'deg)'
                    });
                },
                complete: complete //|| $.noop
            });
        });
    };
    plusOrMinus = Math.random() < 0.5 ? -1 : 1;
    randAngle = Math.floor(Math.random()*70+30) * plusOrMinus;
    randDelay = Math.floor(Math.random()*3000+2000);
    $('#square').animateRotate(randAngle);
    timer = setTimeout(function() { redo(); },randDelay);
}

redo();

http://jsfiddle.net/NWLVY/1

现在我遇到了一些困难：

1. 我想将多个元素传递到此循环中，并且希望它们独立运行。 我不介意它们是否都具有相同的类，或者我是否只需要编写多行来执行每一行。 不会太多。
2. 此旋转不会从最后一个角度继续。 它不断跳回去。 我不知道如何解决此问题。
3. 我似乎无法通过任何诸如swing或linear宽松选项，也无法传递诸如duration和complete任何其他选项。

Answer 1

解决了。

我使用了略有不同的脚本，但现在可以使用了。 我向旋转元素的CSS添加了Transition和Animation行，

transition:2s;
animation:ease-in-out;

这些似乎已经解决了锯齿状旋转的问题，并让我添加一些缓解措施。 然后，我使用了包装函数将不同的元素传递给该函数。

<Script>
 function rotate (elementID) {

    var $rota = $(elementID),
        degree = 0,
        timer;

    function spin() {    
        $rota.css({ transform: 'rotate(' + degree + 'deg)'});   // rotate element
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;       // random spin direction
        randAngle = Math.floor(Math.random()*70+50) * plusOrMinus; // random degrees
        randDelay = Math.floor(Math.random()*1000+2000);  //random delay
        timer = setTimeout(function() {  // set delay
            degree += randAngle;  // add random degree to current variable
            spin(); // loop it
        },randDelay);
    }

    spin();    // start first spin for element

};

rotate ('#square'); // run it
rotate ('#square2'); // run it again

</script>

这是在工作中http://jsfiddle.net/NWLVY/2/