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

Question

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

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

.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代替.