遅延Javascriptのホバーアクション

Question

自分のサイトにjquery hoverアクションが割り当てられている画像があります。しかし、誤ってその領域にマウスを乗せるのは簡単です。もしあなたがそれを複数回行うと、ホバーはあなたがマウスオーバーするたびに一度表示され、消えてしまうまで、表示、消滅、表示などを続けます。あなたが数秒間マウスを動かさなければ、行動が起こらないようにする方法はありますか？私は、マウスオーバーするたびにまだ起こるので、私はちょうどアクションを遅らせたくないです、あなたが数秒間イメージ上にいない限り、マウスオーバーがカウントされない方法があるかどうかを見たいと思っています。

スクリプトこれまで：

$("img.badge").hover(
function() { 
    $("h3.better").animate({"left": "125px"}, 1200); 
}, 
function() { 
    $("h3.better").animate({"left": "-500px"}, 800); 
}); 

Answer 1

あなたは、アクションを起動してmouseoutイベントにclearTimeoutを呼び出す機能をバインドするsetTimeoutを使用することができます。

$('img.badge').hover(function(){ 
    window.mytimeout = setTimeout(function(){ 
     $("h3.better").animate({"left": "125px"}, 1200); 
    }, 2000); 
}, function(){ 
    clearTimeout(window.mytimeout);  
}); 

それとも、そのためのプラグインを使用することができ、 hoverintentのように。

Answer 2

アニメーションの前に.stop()を使用して、前のアニメーションをキャンセルします。私はこれがあなたが探しているものだと信じて、あなたの現在の問題を解決します。ホバーは、タイマーが起動する前に離れた場合、あなたは、このような一定の時間を推移してきたまであなたがホバーアクションを発射しないようにタイマーを使用することができます

$("img.badge").hover(
function() { 
    $("h3.better").stop().animate({"left": "125px"}, 1200); 
}, 
function() { 
    $("h3.better").stop().animate({"left": "-500px"}, 800); 
}); 

Answer 3

、あなたはタイマーをクリアするので、何も起こりません

$("img.badge").hover(function() { 
    var timer = $(this).data("hover"); 
    // if no timer set, set one otherwise if timer is already set, do nothing 
    if (!timer) { 
     // set timer that will fire the hover action after 2 seconds 
     timer = setTimeout(function() { 
      $("h3.better").stop(true).animate({"left": "125px"}, 1200); 
      $(this).data("hover", null); 
     }, 2000); 
     // save timer 
     $(this).data("hover", timer); 
    } 
}, function() { 
    var timer = $(this).data("hover"); 
    if (timer) { 
     clearTimeout(timer); 
     $(this).data("hover", null); 
    } else { 
     // probably would be better to make this an absolute position rather 
     // than a relative position 
     $("h3.better").stop(true).animate({"left": "-500px"}, 800); 
    } 
}); 

注：あなたが唯一の時間の短い期間を推移している場合アニメーションが積み重なることは決してありませんので、私はまた、あなたのアニメーションに.stop(true)を追加しました。