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秒内离开链接，您只需要a setTimeout()来延迟代码，并a 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'));
});

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

3 个答案: