JQuery, проблема с .animate ()

Внутри div #frame у меня есть 3 других div: #top, #middle и #bottom. #top и #bottom находятся на дисплее none, а когда мышь находится над # фреймом, при анимации функции jquery высота # кадра увеличивается, а #top и #bottom отображаются. Когда мышь отсутствует # рамки, размер # кадра уменьшается, а #top и #bottom уходят.

мои css:

#frame{
    position: absolute;
    left:200px;
    border-style: solid;
    border-width: 1px;
    top:200px;
    width:200px;
    height:200px;
}

#middle{
    width:200px;
    height:200px;
    position: absolute;
    top:0px;
}

#top{
    display:none;
    background-color:red;
    width:100%;
}

#bottom{
    position:absolute;
    display:none;
    bottom:0px;
    background-color:red;
    width:100%;
}

мой HTML:

<div id="frame">
    <div id="top">top</div>
    <div id="middle">middle</div>
    <div id="bottom">bottom<br>bottom<br>bottom<br>bottom</div>
</div>

и мой jQuery:

$(document).on('mouseenter mouseleave', '#frame', function( e ) {
    var el = $(this),
        h = el.height(),
        t = el.offset().top,
        mEnt = e.type == "mouseenter";
    if(mEnt == true){
        $('#top').stop().fadeIn(300);
        $('#bottom').stop().fadeIn(300);
        $('#middle').stop().animate({'top':'20px'});
        el.stop().animate({
            'height':h+$('#bottom').height()+20,
            'top':t-20
        }); 
    }else{
        $('#top').stop().fadeOut(300);
        $('#bottom').stop().fadeOut(300);
        $('#middle').stop().animate({'top':'0px'});
        el.stop().animate({
            'height':200,
            'top':t+20
        });
    }
});

Я сделал jsFiddle здесь: http://jsfiddle.net/malamine_kebe/N7mhp/

Моя проблема в том, что когда я вхожу и оставляю #frame очень быстро, его позиция меняется.

Я думаю, что он исходит из переменной t, значение которой меняется одновременно с положением #frame, так как я могу "заморозить" значение t до первой позиции #frame?