jQuery hoverIntent 2 divs交互延迟答案

【问题标题】：jQuery hoverIntent 2 divs interaction delayjQuery hoverIntent 2 divs交互延迟
【发布时间】：2013-01-03 19:34:09
【问题描述】：

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

这是jsFiddle Demo

模拟错误的步骤

Rollover 第一个块会触发动画，它会打开对象。
那么如果你 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);
}

【问题讨论】：

标签： jquery hover mouseover hoverintent

【解决方案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 毫秒后没有悬停一个块，该块会自行关闭，否则它会按照您的意愿保持打开状态。

我说的对吗？ :)

【讨论】：

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

【解决方案2】：

解释为什么它不工作......

问题在于，如果动画已经开始，'stop()' 将停止动画，但如果它正在进行，则不会停止延迟。因此，如果您移出一个盒子并等到蓝色开始移动并快速移回一个盒子，它将立即停止动画。如果你从一个盒子里移出然后又回到一个盒子里，它会完成等待，然后完成整个动画。

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

【讨论】：