javascript 怎样实现 hover 事件延时触发 jquery 的 toggleClass()

Question

如题，我希望移动到 .dropdown 区域内时，.item 能够延时个1秒再添加 .highlight，离开时也延时1秒再移除 highlight，改怎么实现呢？

<div class="dropdown">
  <div class="item">helloworld</div>
</div>

.item {
    background: pink;
}
.highlight {
  height: 100px;
  background: yellow;
}

$('.dropdown').hover(function() {
    $('.item', this).toggleClass('highlight');
});

http://jsfiddle.net/AKcHr/

Answer 1

$('.dropdown').hover(function() {
    var $item = $('.item', this);
    setTimeout(function(){$item.toggleClass('highlight');}, 1000);
});

变量在setTimeout() 和 setInterval()没有用,所以用function代替.

Answer 2

需要记住离开或者进入定时器定时器ID, 进入或者离开时, 需要清除上一次定时器任务. 再创建新的定时

var tid;
$('.dropdown').hover(
  function(){
    if (tid) { clearTimeout(tid); }
    tid = setTimeout(function(){
      tid = 0;
      $('.dropdown').addClass('highlight');
    }, 1e3);
  },
  function(){
    if (tid) { clearTimeout(tid); }
    tid = setTimeout(function(){
      tid = 0;
      $('.dropdown').removeClass('highlight');
    }, 1e3)
  }
);