。每個動畫都有隨機值

我正在嘗試製作幾個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

。每個動畫都有隨機值

回答

相關問題