jQuery - 动画移动元素而不重叠

Question

我正在尝试使我的菜单项随机移动而不会相互重叠。我正在使用animate top left个属性，显然要让他们工作我将位置属性设置为absolute。

现在这种方法的问题在于，当我只是希望它们互相反弹时，它们会重叠在上面。

有没有办法实现这个目标？

function Menu($item) {
    this.item = $item;
};

Menu.prototype.makeNewPosition = function ($container) {
    var h = $container.height() - 50;
    var w = $container.width() - 50;

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

    return [nh, nw];
};


Menu.prototype.move = function () {
    var that = this;
    $.each(this.item, function(index, value) {
        var newq = that.makeNewPosition($(value).parent());

        $(value).animate({
        top: newq[0],
        left: newq[1]
    }, 2000, function() {
        that.move();
    });
    });
};

var $menu = new Menu($('.nav li'));
$menu.move();

JSfiddle