jquery问题与mouseenter（）+ animate（）

里面一个div .frame我有3人的div： .top，.middle和.bottom。

.top使用jQuery函数时，和.bottom都在display none，当鼠标移到上方时，的高度在增加，并且用表示。.frameanimate.frame.top.bottom.fadeIn()

当鼠标移出时.frame，的大小.frame会减小，并且.top与.bottom一起消失.fadeOut()。

我的CSS是：

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

    .middle{
        width:100%;
        position: absolute;
    }

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

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

我的HTML：

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

和我的jQuery：

$(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().animate({
                'height':'+='+d,
                'top':'-=20'
            }); 
            top.stop().fadeIn(300);
            bottom.stop().fadeIn(300);
        }else{
            middle.stop().animate({'top':'0px'});
            el.stop().animate({
                'height':'-='+d,
                'top':'+=20'
            });
            top.stop().fadeOut(300);
            bottom.stop().fadeOut(300);
        }
    });

这是一个jsFiddle：http : //jsfiddle.net/malamine_kebe/Y6cbQ/

它运行良好，但是当鼠标快速进入和离开时，整个事情变得一团糟。我先放了一个.stop()，.animate()但似乎无济于事。