mouseenter（）+ animate（）的jquery问题[重复]答案

【问题标题】：jquery issue with mouseenter() + animate() [duplicate]mouseenter（）+ animate（）的jquery问题[重复]
【发布时间】：2014-01-02 12:02:26
【问题描述】：

在 div .frame 中，我还有另外 3 个 div：.top、.middle 和 .bottom。

.top和.bottom在display none中，当鼠标在.frame上时，用jquery函数animate，.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/

它工作得很好，但是当鼠标快速进入和离开时，它会搞砸整个事情。我在所有.animate() 之前添加了.stop()，但它似乎没有帮助。

【问题讨论】：

为什么又发同样的问题？

标签： jquery css jquery-animate fadein mouseenter

【解决方案1】：

使用.stop(true, true) 代替.stop()。这使得动画队列被清除并且当前动画立即结束 (http://api.jquery.com/stop/)。

你可以在fiddle看到：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);
    }
});

【讨论】：