Question

在div #frame中我还有3个div：＃top，＃middle和#bottom。 #top和#bottom显示为none，当鼠标在#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;

jquery，问题.animate（）

1 个答案: