为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