jquery - .each animate with random value -

jquery - .each animate with random value -

i'm trying create few divs (which images of baloons) hover , downwards random values not going , downwards , little more floaty.

here jsfiddle: http://jsfiddle.net/flmp8/425/

i've tried jquery:

$(document).ready(function() { function runit(i, hoveramount) { $('#baloon' + i).animate({top: '+=' + hoveramount}, 1000); $('#baloon' + i).animate({top:'+=' + hoveramount}, 1000, runit); var currentbaloon = $('#baloon' + i); console.log('baloon: ' + currentbaloon); } var = 1 $('.baloon').each(function() { var hoveramount = 15 + math.floor(math.random() * 21); runit(i, hoveramount); i++; }); });

however, maintain getting returned in console:

baloon: [object object]

can help me this, both divs move , downwards randomly , floaty.

thank you.

in line calling runit functions without parameters:

$('#baloon' + i).animate({top:'+=' + hoveramount}, 1000, runit);

first of need go in sec phone call (so utilize -=), need pass same parameters runit:

$('#baloon' + i).animate({top: '-=' + hoveramount}, 1000, function() { runit(i, hoveramount); });

the console.log problem, logging object normal.

in terms of decent design, @rory mccrossan said, have element , index in jquery, simplify this:

function runit(element, hoveramount) { element.animate({top: '+=' + hoveramount}, 1000); element.animate({top: '-=' + hoveramount}, 1000, function() { runit(element, hoveramount); }); } $('.baloon').each(function() { var hoveramount = 15 + math.floor(math.random() * 21); runit($(this), hoveramount); });

fiddle: http://jsfiddle.net/flmp8/427/

jquery floating