Div overlapping and collision position

See more:

CSS

HTML

jQuery

animation

, +

I am trying to see when my two divs are going to overlap and touch each other. The two yellow divs on this example.

Why is it that the collision returns true at a stage when the divs aren't even overlapping or touching each other ?

http://jsfiddle.net/abc123/HWfMt/162

var degree = 0;
var degreeSmall = 0;
var timer=30;
var $spin = $(".gear");
var $spinSmall = $(".gear-small");
var to;
var toSmall;

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;
    
    if (x1 < x2 + w2 &&
       x1 + w1 > x2 &&
       y1 < y2 + h2 &&
       h1 + y1 > y2) {
        $('#variables').html('true');
    }
    else
    {
           $('#variables').html('false');
    }
    
    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;}


<pre lang="Javascript">$( document ).ready(function() {
    to = setInterval(function() {
        rotate();
    }, timer);
});

function rotate() {
  //  degree++;
//    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    //$spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
   
    $('#result').text('result: ' + collision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow')));}