.que animer avec une valeur aléatoire

Question

J'essaie de faire quelques divs (qui seront des images de ballons) planer de haut en bas mais avec des valeurs aléatoires de sorte qu'ils ne vont pas tous ensemble de haut en bas et regardent un peu plus flottant.

Voici le jsFiddle: http://jsfiddle.net/FLMp8/425/

J'ai essayé ce 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 i = 1 
    $('.baloon').each(function() { 
     var hoverAmount = 15 + Math.floor(Math.random() * 21); 
     runIt(i, hoverAmount); 
     i++; 
    }); 
}); 

cependant, je continue à obtenir ce retour dans la console:

baloon: [object Object] 

quelqu'un peut aidez-moi avec cela, je voudrais que les deux divs montent et descendent au hasard et semblent flotter.

Merci.

Answer 1

Dans cette ligne, vous appelez les runIt fonctions sans paramètres:

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

d'abord tout ce que vous devez aller dans le deuxième appel (donc utiliser -=), alors vous devez passer les mêmes paramètres à runIt:

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

Le console.log est un autre problème, vous connectez un objet si cela est normal.

En termes de design décent, comme @Rory McCrossan dit, vous avez l'élément et l'indice déjà jQuery, vous pouvez donc simplifier tout comme ceci:

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/