More fun with a jQuery particle engine - lack of rotation
Hey, I have a jQuery particle engine (that I'm using as an excuse to learn about easing mostly) - but the little elements won't rotate - here's my code (and a fiddle - see bottom of question):
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+','+r开发者_开发问答ndG+','+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 solved my issue (I was missing the second argument on the setTimeout call). Next issue is why the rotation is a bit "funky".
NEW FIDDLE: http://jsfiddle.net/neuroflux/yLcaY/13/
The rotate
within your timeout function does miss the second parameter ele
.
精彩评论