JavaScript问题:setTimeout

Question

我正在尝试使用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 function", milliseconds);像这样使用:

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

(超时中的回调函数)但它不起作用,我不知道为什么.

Answer 1

你需要像这样使用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);
});

DEMO

Answer 2

我建议使用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");
});

工作演示:http://jsfiddle.net/jfriend00/LuNHR/