jquery，.animate() 问题

Question

在一个 div #frame 中，我还有 3 个其他 div:#top、#middle 和 #bottom。 #top 和#bottom 不显示，当鼠标在#frame 上时，用jquery 函数animate，#frame 的高度增加，#top 和#bottom 显示。当鼠标移出#frame 时，#frame 的大小会减小，#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 的第一个位置？

Answer 1

var t;
$(document).on('mouseenter mouseleave', '#frame', function( e ) {
    var el = $(this),
        h = el.height(),
        mEnt = e.type == "mouseenter";
    if(t == null) t = el.offset().top;