jquery - 尝试在 jquery 中设置动画时 div 的不当行为

Question

我试图在父 div 中为一个小的子 div 设置动画。动画是当鼠标进入父div时，子div向上移动-60px，当鼠标离开父div时，子div会回到原来的位置。它工作正常。 但是当鼠标直接移向子 div 时，它向上移动但在鼠标离开父 div 之前下降。请帮我解决这个问题

参见 this link

我的html代码是

<div id="box" align="center">
    <div id="minibox"></div>
</div>

CSS代码是

#box {
    position:relative;
    top:100px;
    width:200px;
    height:100px;
    border:1px solid #ddd;
}
#minibox {
    position:relative;
    width:50px;
    height:50px;
    border:1px solid #333;
    background-color:green;
}

jquery代码是

$("#box").mouseenter(function () {
    ("#minibox").animate({
        top: "-60px"
    }, {
        duration: 180
    });
});
$("#box").mouseout(function () {
    $("#minibox").animate({
        top: "0px"
    }, {
        duration: 180
    });
});

Answer 1

使用 mouseleave 而不是 mouseout。

$("#box").mouseleave(function(){...});