jQuery hoverIntent 2 divs交互延迟

我想显示几个

块

（div），并使它们以相同的方式与同一对象交互

这里有一个

---

模拟错误的步骤

滚动

第一个块将触发动画，它将打开对象

然后，如果您

Rollover

第二个块，我想保持对象打开，但发生的是，对象先关闭，然后再次打开

客观的 滚动块时保持对象打开

为后代添加了原始代码：

$('.object').css({ "top": '-180px' });
$(".cont1,.cont2").hoverIntent(mousein_triger , mouseout_triger);

function mousein_triger(){
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        $('.object').stop().animate({"top": "-180px"}, 1000);
}

我使用了计时器（全局） 以下是JSFIDLE：

在不悬停块的400毫秒后，块会自动关闭，否则它会按您的意愿保持打开状态

---

我说得对吗？：）

解释为什么它不起作用

问题在于，如果动画已经开始，“stop（）”将停止动画，但如果正在进行，则不会停止延迟。因此，如果您移出一个长方体并等待蓝色的长方体开始移动并快速移回长方体，它将立即停止动画。如果您移出一个长方体并向右返回到一个长方体中，它将完成等待，然后完成整个动画

---

要修复它，请使用@nicolast建议的计时器。

是的，是的。让我在实际实现中尝试一下。谢谢。如果你把计时器设置为1000而不是400，工作起来会更顺畅。这样，激活鼠标输出的延迟与上次鼠标输出时启动动画的延迟相匹配。

var timer = false;
function mousein_triger(){
        clearTimeout(timer);
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        timer = setTimeout(function(){
            $('.object').stop().delay(1000).animate({"top": "-180px"}, 1000);
        }, 400)
}