JQuery 默认案例延迟淡出，当 mouseenter 保持可见时，在 mouseout 之后淡出

Question

我正在尝试做到这一点，如果什么都不做，盒子会在 3 秒后自动淡出，但如果用户将鼠标放在盒子里，它会 stop/prevent 淡出并继续显示，然后一旦用户的鼠标离开它就会淡出。

我试过 HTML:

<div id="box">box</div>

和JQuery：

$("#box").delay(3000).fadeOut("slow");

$("#box").mouseenter(function(){
    $("#box").stop().fadeIn("fast");
});
$("#box").mouseout(function(){
    $("#box").delay(1000).fadeOut("fast");
});

发生的情况是，如果鼠标悬停在初始延迟上，初始延迟仍会淡出，一旦淡出完成，它就会淡入。

Answer 1

我想默认 .stop() 有清除队列和 jumptoend 为 false 所以它会首先完成所有动画。我不得不使用

.stop(true, true)

为了清空队列，结束所有正在进行的动画。我刚刚意识到它们在 JQuery 文档中都设置为 false。

.stop( [clearQueue ] [ jumpToEnd ] )

clearQueue（默认值：false） 类型：布尔一个布尔值，指示是否也删除排队的动画。默认为假。

jumpToEnd（默认值：false） 类型：布尔一个布尔值，指示是否立即完成当前动画。默认为假。

JQuery 默认案例延迟淡出，当 mouseenter 保持可见时，在 mouseout 之后淡出

JQuery Default case delay fadeout, when mouseenter stay visible, after mouseout fadeout

jquery

jquery-animate

jquery-events