。每个动画都有随机值

我正在尝试制作几个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随机上下移动并显得飘渺。

谢谢。

来源

2014-06-19 DannieCoderBoi

你不不需要自己控制'i'，因为迭代int会作为第一个参数传递给'each（）'。 –

@RoryMcCrossan我对JS很新，你能为我详细说明吗？ – DannieCoderBoi

是你唯一的问题，你在控制台看到的事实，或者你没有得到你想要的效果......？ – JAAulde

在这一行，你所呼叫的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/

来源

2014-06-19 12:58:52 Tallmaris

谢谢你，漂亮的代码。 – DannieCoderBoi

。每个动画都有随机值

回答

相关问题