为hover事件加上延迟jquery.hoverIntent

緣起

在jQuery中的原始hover用法中(註 :hover代表滑鼠游標滑過)，

並沒有辦法加上delay(延遲)的設定，

jQuery Plugin的hoverIntent可以加上delay的設定，讓滑鼠移動的效果增加更多的變化。

讓我們來看看用法吧!

hoverIntent

1.載入js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>

2.jQuery code

<script type="text/javascript" charset="utf-8">
$(function () {
$("#demo3 li").hoverIntent({
sensitivity: 3, //滑鼠滑動的敏感度,最少要設定為1
interval: 200, //滑鼠滑過後要延遲的秒數
over: makeTall, //滑鼠滑過要執行的函式
timeout: 500, //滑鼠滑出前要延遲的秒數
out: makeShort //滑鼠滑出要執行的函式
});
})
function makeTall(){ $(this).animate({"height":75},200);}
function makeShort(){ $(this).animate({"height":50},200);}

</script>

3.html code

style type="text/css" media="screen">
#RESOURCES #main .demo li { padding-bottom: 0; }
ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;}
ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default;  font-size:0.9em; line-height:1.1em;}
ul.demo li.p2 {background:#ffc;}
ul.demo li.p3 {background:#cfc;}
ul.demo li.p4 {background:#ccf;}
ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;}
</style>

<ul class="demo" id="demo3">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"> </li>
</ul>

結論

在網站前台的設計上，常會用到各種方式來呈現這個網站提供的功能大項及次項。

滑鼠點選或是滑過大項，下方彈出或是滑出次項就是其中的一種方式。

而以jQuery原本提供的hover用法在功能上比較簡單，

hoverIntent則額外提供了delay(延遲)的設定，

讓單純滑鼠滑過後的變化更多。

下载地址：http://cherne.net/brian/resources/jquery.hoverIntent.html