JavaScript问题：设置超时

我正在尝试使用JavaScript和jQuery创建一个移动面板

我做了这个，JS部分是这样的：

$("nav.nav").hover(function(){
    $("nav.nav").animate({left:'-5px'},100,"swing");
  },
  function(){
    $("nav.nav").animate({left:'-170px'},100,"swing");
  });

正如你所看到的，它正在工作，但我想在离开面板时增加一个延迟，因为有时，我会错误地离开面板1像素，这很烦人

我尝试使用

setTimeout（“javascript函数”，毫秒）像这样：

$("nav.nav").hover(function(){
    $("nav.nav").animate({left:'-5px'},100,"swing");
  }, setTimeout(function(){
      $("nav.nav").animate({left:'-170px'},100,"swing");
  },10));

（超时中的回调函数）但它不起作用，我不知道为什么。
您需要像这样使用hover out函数中的函数

var tOut = null;
$("nav.nav").hover(function () {
    clearTimeout(tOut); //Clear timout so it doesn't animate back when hovering
    $("nav.nav").animate({
        left: '-5px'
    }, 100, "swing");
},function () {
    tOut = setTimeout(function () {
        $("nav.nav").animate({
            left: '-170px'
        }, 100, "swing");
    }, 1000);
});

我建议使用jQuery的
.delay（）
（与
.stop（true）
结合使用），它可以自动为您处理计时器内容：

$("nav.nav").hover(function () {
    $("nav.nav").stop(true).animate({left: '-5px'}, 100, "swing");
},function () {
    $("nav.nav").stop(true).delay(1000).animate({left: '-170px'}, 100, "swing");
});

工作演示：
谢谢安东。。。所以我不再使用hover方法的回调函数了？真有趣！编辑：算了吧，我误读了你的代码为什么使用手动
setTimeout（）
而不是
.delay（）
和
.stop（）
，它们内置于jQuery中并与Animations一起工作？@jfriend00啊是的，setTimeout是我想到的第一件事应该注意的是延迟不会在这里重置。尝试以尽可能快的速度在行中多次悬停以查看我在jQuery延迟页面中的意思：.delay（）方法最适合在排队的jQuery效果之间进行延迟。例如，由于它的局限性，它没有提供一种取消延迟的方法。delay（）不是JavaScript本机setTimeout函数的替代品，后者可能更适合某些用例。