jquery - マウスオーバー、タイムアウト設定機能が動作しない

Question

2秒後にマウスオーバーしましたが、設定タイムアウト機能が動作していません

js

setTimeout(function () {
  $('.box').mouseover(function () {
    $(this).animate({
      marginTop: '-224px',
      height: '300px'
    })
    $(this).find('.rotate-arrow').addClass('rotate');
  });
}, 2000);

Answer 1

説明：

setTimeoutの内部にイベントハンドラーをアタッチしました。これは、基本的に、関数を要素のにアタッチする前に2秒間待機することを意味しmouseoverます.box。

残念ながら$(this)、setTimeout関数はスコープ外であるため、値が読み取られていませんでした。幸いなことに、通常どおりにjqueryオブジェクトにアクセスできるネストされた関数のスコープ内$(this)にある変数に簡単に割り当てることができます。

---

解決：

$('.box').mouseover(function () {
  var $this = $(this)
  setTimeout(function () {
    $this.animate({ marginTop: '-224px', height: '300px' })
    $this.find('.rotate-arrow').addClass('rotate');
  }, 2000);
});

---

jsFiddle：

• http://jsfiddle.net/mF46t/