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

Question

我正在使用一个简单的 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 的新手

有任何想法吗？

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

Answer 2

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

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

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

Answer 3

我是 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)
});