Javascript - 在鼠标离开时延迟动画答案

【问题标题】：Javascript - Delay animate upon mouseleaveJavascript - 在鼠标离开时延迟动画
【发布时间】：2012-06-22 02:21:52
【问题描述】：

我正在使用一个简单的 Javascript，它使菜单在 mouseenter 时滑出，然后在 mouseleave 时滑入。但是，当鼠标离开该区域时，我希望菜单保持原位几秒钟，然后滑入。

这是我正在使用的代码。

$('#nav').mouseleave(function()
    {
            $("#nav").animate({"left": "0"}, "1000");
            $("#nav li a").css({ opacity: 0.7 });
            $("#nav li.current a").css({ opacity: 1 });
});

我已经搜索堆栈溢出和谷歌，但无法让任何解决方案发挥作用。我只是 JS 新手

有什么想法吗？

【问题讨论】：

.mouseleave() with .delay() working together 的可能重复项
检查延时功能http://api.jquery.com/delay/

标签： javascript jquery jquery-animate delay

【解决方案1】：

稍微好一点，如果你在动画执行之前再次悬停：

$('#nav').hover(function () {
    clearTimeout(this.timer);
}, function () {
    this.timer = setTimeout(function () {
        $("#nav").animate({"left": "100"}, "1000");
        $("#nav li a").css({ opacity: 0.7 });
        $("#nav li.current a").css({ opacity: 1 });
    }, 1000);
});

【讨论】：

这是完美的答案+1

【解决方案2】：

我非常喜欢 setTimeout() 方法。

http://www.w3schools.com/jsref/met_win_settimeout.asp

所以我会这样做

$('#nav').mouseleave(function()
{
        setTimeout( function(){
        $("#nav").animate({"left": "0"}, "1000");
        $("#nav li a").css({ opacity: 0.7 });
        $("#nav li.current a").css({ opacity: 1 });},1000)
});

【讨论】：

w3schools 不是一个好的选择，因为它不提供完整的信息
感谢 Aaron，此代码运行良好且易于理解。

【解决方案3】：

使用来自 JQuery API 的 .delay() 函数：http://api.jquery.com/delay/

$("#nav").delay(3000).animate({"left": "0"}, "1000");

这会在调用 animate() 之前等待 3000 毫秒（3 秒）

【讨论】：