Instead of .stop()
use .stop(true, true)
. This makes it so the queue of animations is cleared and the current animation finishes immediately (http://api.jquery.com/stop/).
You can see in the fiddle: http://jsfiddle.net/3gYtK/
$(document).on('mouseenter mouseleave', '.frame', function( e ) {
var el = $(this),
top = el.children('.top'),
bottom = el.children('.bottom'),
middle = el.children('.middle'),
d = bottom.height()+20,
mEnt = e.type == "mouseenter";
if(mEnt == true){
middle.stop().animate({'top':'20px'});
el.stop(true, true).animate({
'height':'+='+d,
'top':'-=20'
});
top.stop(true, true).fadeIn(300);
bottom.stop(true, true).fadeIn(300);
}else{
middle.stop().animate({'top':'0px'});
el.stop(true, true).animate({
'height':'-='+d,
'top':'+=20'
});
top.stop(true, true).fadeOut(300);
bottom.stop(true, true).fadeOut(300);
}
});