jQuery碰撞检测与多个随机移动div

Question

我正试图找到一种方法让多个div在碰撞时移动不同的方向。这是我正在使用的小提琴。任何帮助表示赞赏...

标记

<div class='ani' name="animate"></div>
<div class='ani' name="animate"></div>
<div class='ani' name="animate"></div>
<div class='ani' name="animate"></div>
<div class='ani' name="animate"></div>
<div class='ani' name="animate"></div>

CSS

div.ani {
 width: 150px;
 height:150px;
 background-color:black;
 position:fixed;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;

}
div.ani:hover {
  background-color:#BD0000;   
}
}

的Javascript

(function() {
var e = jQuery,
    f = "jQuery.pause",
    d = 1,
    b = e.fn.animate,
    a = {};

function c() {
    return new Date().getTime()
}
e.fn.animate = function(k, h, j, i) {
    var g = e.speed(h, j, i);
    g.complete = g.old;
    return this.each(function() {
        if (!this[f]) {
            this[f] = d++
        }
        var l = e.extend({}, g);
        b.apply(e(this), [k, e.extend({}, l)]);
        a[this[f]] = {
            run: true,
            prop: k,
            opt: l,
            start: c(),
            done: 0
        }
    })
};
e.fn.pause = function() {
    return this.each(function() {
        if (!this[f]) {
            this[f] = d++
        }
        var g = a[this[f]];
        if (g && g.run) {
            g.done += c() - g.start;
            if (g.done > g.opt.duration) {
                delete a[this[f]]
            } else {
                e(this).stop();
                g.run = false
            }
        }
    })
};
e.fn.resume = function() {
    return this.each(function() {
        if (!this[f]) {
            this[f] = d++
        }
        var g = a[this[f]];
        if (g && !g.run) {
            g.opt.duration -= g.done;
            g.done = 0;
            g.run = true;
            g.start = c();
            b.apply(e(this), [g.prop, e.extend({}, g.opt)])
        }
    })
}
})();

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

function makeNewPosition() {

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

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

return [nh, nw];

}

$(document).ready(function() {
$("div[name=animate]").each(function() {
    animateDiv($(this));
});
});

function animateDiv(c) {
var newq = makeNewPosition();
$(c).animate({
    top: newq[0],
    left: newq[1]
}, 6000, function() {
    animateDiv(c);
});

$(c).hover(function() {
    $(this).pause();
}, function() {
    $(this).resume();
});

};

http://jsfiddle.net/Xw29r/4506/