Question

我有这段代码：

{{1}}

它正在工作，但我想在用户返回元素时停止mouseleave中的动画。这是一个场景：鼠标在盒子上方，它正在改变，你正在离开并且正在播放800毫秒动画，但是当你在这段时间内回到盒子上时，你必须等到动画结束然后鼠标悬停被展示。它看起来不太好。

Answer 1

托尼的评论是对的。但如前所述，你实际上并不需要JS来做这件事，CSS可以提供帮助，就像那样（供应商前缀不包括在内以简洁起见）：

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

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

Answer 2

使用鼠标悬停处理程序中的.stop()函数暂停对象上运行的任何动画：

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

如何使鼠标悬停功能打破mouseleave？

2 个答案: