???

block.onmouseover = function () {

if (block.busy) return;
block.busy = true;

animateProp({start:0, end: -20, prop:'marginTop', duration:500, elem:logo}, block.busy = false)


}

я незнаю как устроена ваша функция animateProp поэтому незнаю правильно или нет вы разместили параметр -- block.busy = false - возможно так function ()
{
block.busy = false
}

function animateProp(opts) {

var start = opts.start, end = opts.end, prop = opts.prop;

opts.step = function(progress) {
opts.elem.style[prop] = (end - start) * progress + start+'px'
}

return animate(opts);


}

var logo = document.getElementById('logo');

logo.onmouseover = function () {

if (logo.busy) return;
logo.busy = true;


animateProp({start:0, end: -20, prop:'marginTop', duration:500, elem:logo},function() {
logo.busy = false;
 })


}

logo.onmouseout = function () {

if (logo.busy) return;
logo.busy = true;


animateProp({start:-20, end: 0, prop:'marginTop', duration:500, elem:logo},function() {
logo.busy = false;
 })


}

работает только при onmouseover

hoax,
если вы знаите где останавливается ваша анимация туда и ставте logo.busy = false -- в вашем коде я не вижу остановки анимации.

В jQuery это делается просто: $(el).stop().animate(..) и анимация срабатывает без всяких задержек, то есть не накапливается.
А тут какой-то велосипед animateProp, хз как тут такое сделать. Неясно зачем писать велосипедный код, который уже есть в jQuery и каждая собака умеет пользоваться этой либой.