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 の余白と不透明度が変化します。

ユーザーがポインタでリンク領域を2秒以上ホバーした後にのみ、これを機能させる方法はありますか?

すべてがリアルタイムで行われるようになったからです。

があることは知ってdelay()いますが、アニメーションを遅らせるだけなので機能しません。この場合、ポインターが2秒未満である場合、アクションは必要ありません。

ループなしで可能ですか？

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 秒以内にリンクを離れた場合にコードをクリアするとともに、コードを遅らせるにはが必要setTimeout()です。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'));
});