[jQuery] ホバーしてからｎ秒後に発火するイベントの作り方

やりたいこと

爆弾の画像 を用意して、その画像に３秒間カーソルがホバーし続けたら爆発した画像に代わるイベントを実装します。

どんなときに使えるか

例えば EC サイトで商品一覧を表示させて、カーソルが商品の上に乗ったときに商品の詳細情報や拡大写真などを表示させたいとします。このイベントをカーソルが乗った瞬間（０秒後）に発火させてしまうと、意図せずカーソルが乗ってしまった商品に対しても処理が走ってしまい、すごく使いづらく感じます。このような場合に発火までの待機時間を設定できると便利かなと思います。

ソースコード

html

爆弾の画像と爆発の画像の２種類を用意ます。

time_bomb.html

<img id="bakudan" src="bakudan.png">
<img id="bakuhatsu" src="bakuhatsu.png">

css

爆弾画像の下に爆発画像を重ね、爆発は透明にしておきます。

style.css

# bakudan {
  z-index: 1;
}
# bakuhatsu {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0px;
}

jQuery

カーソルが画像に乗ったとき、変数 timeBomb にsetTimeout の関数を代入します。途中でカーソルが外れたら setTimeout をキャンセルします。
今回は発火後でもカーソルが外れたら画像が元に戻るようにしました。

time_bomb.js

var timeBomb;
$('#bakudan').hover(
  function() {
    timeBomb = setTimeout(function() {
      $('#bakudan').css('opacity', '0')
      $('#bakuhatsu').css('opacity', '1')
    }, 3000)
  }, function() {
    $('#bakudan').css('opacity', '1')
    $('#bakuhatsu').css('opacity', '0')
    clearTimeout(timeBomb)
  }
)

clearTimeout がないとイベントがキャンセルできず、一瞬でもカーソルが乗ると３秒後にイベントが発火してしまうので注意です。

以上となります。