jquery - 鼠标悬停，设置超时功能不起作用

Question

两秒后鼠标悬停，但设置超时功能不起作用

js

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

Answer 1

解释:

您已将事件处理程序附加到 setTimeout 内部，这实际上意味着这将等待 2 秒，然后再将函数附加到 .box 元素的 mouseover。

不幸的是，来自 setTimeout 函数的 $(this) 超出了范围，所以您的值没有被读取。幸运的是，您可以简单地将 $(this) 分配给 在 嵌套函数范围内的变量，您将能够像往常一样访问 jquery 对象.

---

解决方案:

$('.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/