JavaScript问题:setTimeout

时间:2014-07-02 15:22:37

标签: javascript jquery jquery-animate settimeout jquery-hover

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

我做了这个Working Demo,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));

(超时中的回调函数)但它不起作用,我不明白为什么。

2 个答案:

答案 0 :(得分:7)

您需要使用悬停输出功能中的功能,如此

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

答案 1 :(得分:5)

我建议使用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/