2

ねえ、私は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();
});

[編集]@Howardは私の問題を解決しました(setTimeout呼び出しの2番目の引数がありませんでした)。次の問題は、回転が少し「ファンキー」である理由です。

新しいフィドル:http ://jsfiddle.net/neuroflux/yLcaY/13/

4

1 に答える 1

3

タイムアウト関数内では、2番目のrotateパラメーターが欠落していますele

于 2011-04-10T11:24:39.197 に答える