鼠标悬停,设置超时功能不起作用

Question

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

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函数超出了范围,因此您的值未被读取.幸运的是,您可以简单地分配$(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/