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 调用的第二个参数）。下一个问题是为什么旋转有点“时髦”。

新小提琴：http : //jsfiddle.net/neuroflux/yLcaY/13/

4

1 回答 1

3

您的rotate超时函数内确实错过了第二个参数ele。

于 2011-04-10T11:24:39.197 回答