.每个动画都带有随机值答案

【问题标题】：.each animate with random value.每个动画都带有随机值
【发布时间】：2014-06-19 12:41:43
【问题描述】：

我正在尝试让一些 div（将是气球的图像）上下悬停，但具有随机值，这样它们就不会一起上下移动，看起来更飘浮。

这里是 JSFiddle：http://jsfiddle.net/FLMp8/425/

我试过这个 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++;
    });
});

但是，我一直在控制台中返回这个：

baloon: [object Object]

有人可以帮我解决这个问题，我希望两个 div 随机上下移动，看起来很飘。

谢谢。

【问题讨论】：

你不需要自己控制i，因为一个迭代的int作为第一个参数传入each()。
@RoryMcCrossan 我对 JS 很陌生，你能详细说明一下吗？
您唯一的问题是您在控制台中看到它，还是您没有得到您想要的效果......？
有什么问题？我看到方块以不同的速度移动，而不是“一起”漂浮
您在控制台中收到[object Object]，因为您正在附加一个字符串和一个对象。这是正常行为。您的代码可以正常工作，因为气球动画正确。您要解决的问题是什么？

标签： jquery floating

【解决方案1】：

在这一行中，您正在调用不带参数的 runIt 函数：

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

首先你需要在第二次调用中向上（所以使用-=），然后你需要将相同的参数传递给runIt：

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

console.log 是另一个问题，您正在记录一个对象，所以这是正常的。

就体面的设计而言，正如@Rory McCrossan 所说，您已经在 jQuery 中拥有元素和索引，因此您可以像这样简化一切：

 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);
 });

小提琴：http://jsfiddle.net/FLMp8/427/

【讨论】：