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

Posted 2023-05-08

【中文标题】mouseenter（）+ animate（）的jquery问题[重复]

【英文标题】：jquery issue with mouseenter() + animate() [duplicate]

【发布时间】：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()，但它似乎没有帮助。

【问题讨论】：

为什么又发同样的问题？

【参考方案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);
    
);