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

使用JQuery API中的.delay()函数：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)
});

Javascript - 在mouseleave上延迟动画

3 个答案: