Question

在div .frame内，我还有3个div：.top，.middle和.bottom。

.top和.bottom位于display none，当鼠标超过.frame时，使用jquery函数animate，{{1}的高度}}正在增加，.frame和.top显示为.bottom。

当鼠标移出.fadeIn()时，.frame的大小正在减少，而.frame和.top将随.bottom消失。

我的CSS是：

.fadeOut()

我的HTML：

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

.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%;
}

和我的jQuery：

<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>

你可以在jsFiddle中看到效果： http://jsfiddle.net/malamine_kebe/WE25E/

我的问题（你在jsFiddle中看不到它，但在我的电脑里看到的却是这样）当我进入和离开var t, h; $(document).on('mouseenter mouseleave', '.frame', function( e ) { var el = $(this), top = el.children('.top'), bottom = el.children('.bottom'), middle = el.children('.middle'), mEnt = e.type == "mouseenter"; if(t == null){ t = el.offset().top; h = el.height(); } if(mEnt == true){ middle.stop().animate({'top':'20px'}); el.stop().animate({ 'height':h+bottom.height()+20, 'top':t-20 }); top.stop().fadeIn(300); bottom.stop().fadeIn(300); }else{ middle.stop().animate({'top':'0px'}); el.stop().animate({ 'height':200, 'top':t }); top.stop().fadeOut(300); bottom.stop().fadeOut(300); } });非常快时，我的鼠标最终超过.frame然后.frame和.top不希望.bottom，而我能看到的只是空白

jQuery，问题与.animate（）和.fadeIn（）

0 个答案: