Edit in JSFiddle

var mouseOverToolbar = 0, busy = 0, lockToolbar = 0, toHandler = 0, toolbarHidden = 0, _$toolbar = $('.toolbar');

function init() {
  _$toolbar.hover( MouseOver_toolbar, MouseOut_toolbar);
  setTimeout(CollapseToolBar, 200);
}

function MouseOver_toolbar () {
  mouseOverToolbar = 1;
  ExpandToolBar();
};

function MouseOut_toolbar () {
  mouseOverToolbar = 0;
  if (lockToolbar) return;
  CollapseToolBar();
};

function CollapseToolBar () {
  if (lockToolbar || busy || toolbarHidden) return;
  if (toHandler) clearTimeout(toHandler);
  toHandler = setTimeout(function () {
    if (mouseOverToolbar) {
      setTimeout(CollapseToolBar, 500);
    }
    else {
      busy = 1;
      _$toolbar.addClass('off', 200, 'linear', function () {
        toolbarHidden = 1;
        busy = 0;
     });
    }
  },500);
};

function ExpandToolBar () {
  if (busy || !toolbarHidden) return;
  busy = 1;
  if (toHandler) clearTimeout(toHandler);
    _$toolbar.removeClass('off', 200, 'linear', function () {
      toolbarHidden = busy = 0;
    });
};

init();

<div class="toolbar">M o u s e<br/><br/>o v e r<br/><br/>m e !</div>

.toolbar { position:relative; background-color: blue; color: white; 
    width: 100px; height:300px; }
.off { width: 15px}