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

发布于 2024-10-03 04:40:08 字数 534 浏览 4 评论 0原文

我有一个链接：

<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()，但它不起作用，因为它只是延迟动画，在这种情况下，如果指针超过了时间，我不希望执行任何操作不到两秒。

没有循环可以吗？

原文

I have a link:

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

This is not a normal clickable link, it's coded in jQuery like this:

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

So after hovering unclickable link there's change of #tv's margin and opacity.

Is there any way of making this work only after the user hovers the link area with pointer for more than two seconds?

Because now everything happens in real time.

I know there's delay(), but it doesn't work because it just delays the animation and in this case I don't want any action if the pointer is over for less than two seconds.

Possible without a loop?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魔法少女 2024-10-10 04:40:08

您所追求的称为 hoverIntent。

回复收藏 0 原文

-残月青衣踏尘吟 2024-10-10 04:40:08

var animateTimeout;

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

function animate() {
  //do animation
}

var animateTimeout;

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

function animate() {
  //do animation
}

回复收藏 0 原文

难如初 2024-10-10 04:40:08

你只需要一个setTimeout()来延迟代码，与 a clearTimeout() 一起清除它，如果用户2 秒内离开链接。

示例： 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'));
});

You just need a setTimeout() to delay the code, along with a clearTimeout() to clear it if the user leaves the link within 2 seconds.

Example: 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'));
});

回复收藏 0 原文

~没有更多了~