Больше удовольствия с движком частиц jQuery — отсутствие вращения

Эй, у меня есть механизм частиц jQuery (который я использую в качестве предлога, чтобы узнать в основном о смягчении), но маленькие элементы не будут вращаться - вот мой код (и скрипка - см. конец вопроса):

function rotate(degree, ele) { 
    $(ele).css({ '-webkit-transform': 'rotate(' + degree + 'deg)'});  
    $(ele).css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
    timer = setTimeout(function() {
        rotate(++degree);
    },5);
}

function particles() {
    var thisParticle;
    var particleSize = Math.floor(Math.random() * 24 + 8);
    var prependElement = $('body');
    var speed = Math.floor(Math.random() * 2000 + 900);
    var distance = Math.floor(Math.random() * 500 + 200);
    var fallOffSpeed = speed / 2;
    var fallOff = distance + distance / 1.5;
    var top = 200;      
    var rndR = Math.floor(Math.random() * 254);
    var rndG = Math.floor(Math.random() * 254);
    var rndB = Math.floor(Math.random() * 254);
    $(this).css({'background-color':'rgba('+rndR+','+rndG+','+rndB+', 1.0)'});

    $(prependElement).prepend($('<div>', {
        "class" : "particles",
        "height": particleSize,
        "width": particleSize,
    }).css({
        "background-color": "rgba("+rndR+","+rndG+","+rndB+", 1.0)",
        "position": "absolute",
        "-moz-border-radius": "1px",
        "border-radius": "1px",
        "opacity":0.75,
        "top": top,
        "z-index": "10"
    }));

    $.each($('.particles'), function () {
        var tmpEle = $(this);
        rotate(0,tmpEle);
        rndR = Math.floor(Math.random() * 254);
        rndG = Math.floor(Math.random() * 254);
        rndB = Math.floor(Math.random() * 254);
        if ($(this).css("opacity") == 0) {
            $(this).remove();
        } else {
            thisOffset = $(prependElement).height()+$(this).offset().top+(top-$(this).height());
            $(this).animate({
                "left": [distance, 'linear'],
                "top": [thisOffset, 'easeOutBounce']
            }, speed, 'linear').animate({
                "left": fallOff,
                "opacity" : "0"
            }, fallOffSpeed, 'linear');
        }
    });

    setTimeout(particles, 250);
}
$(document).ready(function() {
    particles();
});

[EDIT] @Howard решил мою проблему (мне не хватало второго аргумента в вызове setTimeout). Следующая проблема заключается в том, почему вращение немного «причудливое».

НОВАЯ СКРИПКА: http://jsfiddle.net/neuroflux/yLcaY/13/


person Barrie Reader    schedule 10.04.2011    source источник
comment
вау.. отлично!!! stackoverflow.com/questions/5610171/transform-in-jquery/ возможно, лучший способ повернуть его, чтобы создать еще один плагин для ротатора   -  person Santosh Linkha    schedule 10.04.2011
comment
не должен ли угол поворота быть пропорционален начальной скорости   -  person Santosh Linkha    schedule 10.04.2011
comment
jsfiddle.net/yLcaY/22   -  person Santosh Linkha    schedule 10.04.2011
comment
Превосходно @experimentX - напишите ответ, и я дам вам +1   -  person Barrie Reader    schedule 10.04.2011
comment
Честно говоря, я ничего не делал .. просто добавил speed+10 к нему   -  person Santosh Linkha    schedule 10.04.2011


Ответы (1)


rotate в вашей функции тайм-аута не хватает второго параметра ele.

person Howard    schedule 10.04.2011
comment
Эй, Говард. Так это заставляет его вращаться! (наконец, спасибо +1 за вас) - но реакция анимации немного набросана: jsfiddle. сеть/нейрофлюс/yLcaY/13 - person Barrie Reader; 10.04.2011