jQuery: contrôle la vitesse d'un élément qui se déplace de manière aléatoire - jQuery, animation

J'ai ce code qui fonctionne très bien. Il déplace un élément à l'intérieur d'un conteneur de manière aléatoire. Le problème est que je ne peux pas contrôler la vitesse de l’élément; j’ai essayé plusieurs solutions (comme la durée normale de la méthode d’animation), mais aucune d’entre elles n’a fonctionné. Toute aide serait appréciée. Le code:

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

Le violon https://jsfiddle.net/hjtkesaj/

Réponses:

.animate accepte une option duration paramètre en millisecondes après les propriétés. Un exemple pour que la volée prenne 5 secondes par itération:

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

(Violon)

Randomiser cette valeur pour chaque itération pourrait être un bon moyen de créer une illusion bon marché de mouvement chaotique ressemblant à une mouche.