jQuery - 动画移动元素，没有重叠

Question

我试图让我的菜单项移动到随机位置而不会相互重叠。我使用animate与top left一起使用，显然对于那些工作我将position属性设置为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