緣起
在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