jQuery：控制隨機移動元素的速度

Question

我有這個代碼工作得很好。它隨機移動一個容器內的元素。問題是我無法控制元素的速度;我已經嘗試了幾種解決方案（比如動畫方法的正常持續時間），但是他們都沒有工作。任何幫助都會有所幫助。的代碼：

$(document).ready(function() { 
    animateDiv(); 
}); 

function makeNewPosition() { 
    var h = $('.main-translucid').height() - 50; 
    var w = $('.main-translucid').width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw]; 
} 

function animateDiv() { 
    var newq = makeNewPosition(); 
    $('.fly').animate({ 
    top: newq[0], 
    left: newq[1], 
    right: newq[0], 
    bottom: newq[0] 
    }, function() { 
    animateDiv(); 
    }); 
}; 

小提琴：https://jsfiddle.net/hjtkesaj/

Answer 1

.animate接受在屬性後毫秒可選duration參數。一個例子，使飛花費5每秒迭代：

function animateDiv() { 
    var newq = makeNewPosition(); 
    $('.fly').animate({ 
    top: newq[0], 
    left: newq[1], 
    right: newq[0], 
    bottom: newq[0] 
    }, 5000, function() { 
    animateDiv(); 
    }); 
}; 

（Fiddle）

隨機化每次迭代這個值可能是創建飛般的混亂運動的廉價幻想的好方法。