悬停事件的基本用法
你想让网站变得炫酷想当初卡片游戏吗？ jQuery能帮到大忙！特别是那个”hover”事件，把鼠标放在上面，效果就会变。在jQuery里操作DOM元素，这事儿可容易多了。只要告诉它”按下时干什么，松开时怎么办”，马上就能实现。这样一来，你的元素就能变得美美的，用户也会看得开心！
hover取消后再执行
在敲代码时，可能会遇到这么个情况：我们需要在鼠标滑过去的那一刹那取消之前的行为，同时马上开始新的活动。就跟在电脑上飞快地晃动鼠标一样，原有的动作得先停住，新的行为才能开始。如何用jQuery解决这个问题？其实只要用到 stop()和 delay()这两招儿就能搞定了。stop()的作用就是让正在进行中的动画或效果暂时停下来；而 delay()则是让我们稍微等那么一下再继续后续操作。
当想要在鼠标停留期间撤回上次操作然后执行另一个的时候，看这里，这几个代码就能解决问题
$('selector').hover(function() {
// 如果想要执行的操作
}, function() {
// 如果想要取消的操作
});
javascript
当鼠标轻点到这块#element上面，这个函数就要开始运行。
停下来，然后把宽改成200像素！就用那么一点点的500毫秒。
}, function(){
var $this =$(this);
这里有个小技巧，首先我们把播放速度拉到最高速，然后耐心等待半秒钟再做动作设定，这样游戏趣味性会大大提升！
});
这代码就是让网页在你鼠标停留在上面时放大点，等到你移开再过500毫秒它就恢复原样！这样就不怕你取消专注后要再次调整其他效果喽~
应用场景举例
var timeoutId;
$('selector').hover(function() {
// 如果想要执行的操作
$(this).stop().animate({ width: '100px' }, 500);
clearTimeout(timeoutId);
}, function() {
// 如果想要取消的操作
timeoutId = setTimeout(function() {
$(this).stop().animate({ width: '50px' }, 500);
}, 500);
});
这个小牛逼你能用到好多地方！举个例子，当你在翻看图文档时，手滑点错了页，不用担心，这招儿马上帮到你！潇洒使用hover事件调整切换按钮，立马选回心仪的图片！再说，有时候菜单一拉开或缩进去，因为速度过快导致反应迟钝，这时候怎么办？别慌，找off()和delay()这对好朋友帮忙~它们能让你的页面互动更加流畅自如！
注意事项
搞定神奇的hover效果后，也不能松懈！首先要确保你没选错东西，也对，就是那些元素啦；接着定时器这个坑儿别忘记去填，一多就会乱套啦；最后是动画部分，务必好好处理，别让它生硬或波动太大。
总结
看了我们这篇简单攻略，你就能懂 jQuery 的 hover 事件怎么暂停，还能再启动。这个在网页设计里挺常见的互动方式，挺实要用滴！学好了这些，你做出的网站用户感受绝对更好，用户感觉会更趁手。
看完这文儿，jquery的hover事件轻松拿下！
评论0