javascript - 如何使 mouseover 功能中断 mouseleave？

Question

我有这个代码:

    $(".box").mouseover(function() {
        $(this).find(".desc").animate({ "color": "#fff", "backgroundColor": "#1d2a63" }, 200);
    });
    $(".box").mouseleave(function() {
        $(this).find(".desc").animate({ "color": "#747474", "backgroundColor": "#fff" }, 800 );
    });

它正在工作，但我想当用户返回到某个元素时停止 mouseleave 内的动画。这是一个场景:鼠标悬停在框上，它正在变化，确定，你要离开，并且正在播放 800 毫秒的动画，但是当你在这段时间返回框时，你必须等到动画完成然后鼠标悬停被展示。看起来不太好。

Answer 1

托尼的评论是正确的。但如前所述，您实际上不需要 JS 来完成此操作，CSS 可以提供帮助，就像这样(为简洁起见，未包含 vendor 前缀):

.box {
    color: #747474;
    background-color: #fff;
    transition: all .2s;
}

.box:hover {
    color: #fff;
    background-color: #1d2a63;
    transition: all .8s;
}