jQuery Collision Detection with multiple random moving divs -

i'm trying find way multiple divs move different direction if collide. here's fiddle working with. appreciated...

markup

<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,     = {};  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() {  // viewport dimensions (remove dimension of 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/