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:100%;
        position: absolute;
    }

    .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/Y6cbQ/

它运行良好，但是当鼠标进入和快速离开时，它会弄乱整个事情。我在所有$(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); } });之前添加了.stop()，但似乎没有帮助。

Answer 1

而不是.stop()使用.stop(true, true)。这样就可以清除动画队列，并立即完成当前动画（http://api.jquery.com/stop/）。

你可以在小提琴中看到：http://jsfiddle.net/3gYtK/

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

mouseenter（）+ animate（）的jquery问题

1 个答案: