Question

我试图制作一些div（这将是baloons的图像）上下徘徊但是随机值，以便它们不会一起上下移动，看起来更加浮动。

这是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随机上下移动，看起来很漂亮。

谢谢。

Answer 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/

.each具有随机值的动画

1 个答案: