javascript - jQuery - 链接工作*仅*在一段时间后

Question

我有一个链接：

<a href="#" id="link">Here's my link</a>

这不是一个普通的可点击链接，它是用 jQuery 编码的，如下所示：

 $("#link").hover(function(e) { 
    e.preventDefault();   
    $("#tv").stop().animate({marginLeft: "50px"});
    $("#tv img)").animate({opacity: 1});
})  

因此，在悬停不可点击的链接后，#tv 的边距和不透明度会发生变化。

只有在用户用指针将链接区域悬停超过两秒钟后，有没有办法使这项工作？

因为现在一切都是实时发生的。

我知道有delay()，但它不起作用，因为它只是延迟了动画，在这种情况下，如果指针结束不到两秒，我不想要任何动作。

没有循环可能吗？

Answer 1

你所追求的被称为hoverIntent。

Answer 2

var animateTimeout;

$("#link").hover(function() {
  if (animateTimeout != null) { 
    clearTimeout(animateTimeout); 
  }
  animateTimeout = setTimeout(animate, 2000);
}, function() {
  clearTimeout(animateTimeout);
});

function animate() {
  //do animation
}

Answer 3

如果用户在 2 秒内离开链接，您只需要asetTimeout()延迟代码，以及清除它。clearTimeout()

示例：http: //jsfiddle.net/mNWEq/2/

$("#link").hover(function(e) {
    e.preventDefault();
    $.data(this).timeout = setTimeout(function() {
        $("#tv").stop().animate({marginLeft: "50px"});
        $("#tv img)").animate({opacity: 1});
    }, 2000);
}, function(e) {
    clearTimeout($.data(this,'timeout'));
});