jQuery hoverIntent 2 div交互延迟

Question

我想显示几个blocks(Div)，并使它们以相同的方式与同一个对象交互。

这里是一个 jsFiddle演示

模拟错误的步骤

1. Rollover第一个块这将触发一个动画，它打开对象。
2. 然后，如果您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);
}

Answer 1

我使用了计时器(全局)--这里是jsfiddle：http://jsfiddle.net/zL5jZ/

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)
}

400毫秒后，没有悬停一个块，该块关闭自己，否则它将保持开放，如你所愿。

我说得对吗？

Answer 2

解释为什么不起作用..。

问题是，如果动画已经启动，“stop ()”就会停止，但是如果它正在进行，则不会停止延迟。所以，如果你从一个盒子里移出来，等到蓝色的那个开始移动，然后迅速移回一个盒子里，它就会立即停止动画。如果您从一个框中移出并返回到一个框中，它将完成等待，然后完成整个动画。

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