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

var animateTimeout;

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

function animate() {
  //do animation
}

Answer 2

あなたが望んでいるものは呼ばれています ホバリント.

Answer 3

必要なだけです a 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'));
});