jquery hoverIntent 插件介绍

最新推荐文章于 2025-01-20 09:20:04 发布

最新推荐文章于 2025-01-20 09:20:04 发布 · 383 阅读

文章标签：

hoverIntent是一款jQuery插件，它通过监测鼠标移动来判断用户的意图，并在用户鼠标静止时触发事件，以此来延迟或避免意外地触发动画或AJAX请求。与jQuery的hover方法相比，hoverIntent更智能，适用于较大目标区域。

hoverIntent jQuery Plug-in

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.

Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That's where hoverIntent comes in...

hoverIntent是一个插件，当用户鼠标移动时，能够试图确定用户的意图， hoverIntent会等待用户的鼠标慢下来，才去调用javascript。

 <!-- DEMO JS -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#demo1 li").hover(makeTall,makeShort);
$("#demo2 li").hoverIntent(makeTall,makeShort);
$("#demo3 li").hoverIntent(toggleHeight);
$("#demo4").hoverIntent(makeTall,makeShort,'li');
$("#demo5").hoverIntent(toggleHeight,'li');
$("#demo6").hoverIntent({
over: makeTall,
out: makeShort,
selector: 'li'
});
}); // close document.ready
function makeTall(){$(this).animate({"height":75},200);}
function makeShort(){$(this).animate({"height":50},200);}
function toggleHeight(){var h=(parseInt($(this).css('height'),10) > 50) ? 50 : 75; $(this).animate({"height":h},200);}
</script>

https://github.com/briancherne/jquery-hoverIntent