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/