article:
JS Plugin: slidingPanels
article:
JS Plugin: Vegas Background

JS Plugin: hoverIntent

Advertisement

"hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call."


Plugin: hoverIntent


Implements

jQuery's built-in hover calls onMouseOver/onMouseOut functions immediately.

HEAD

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

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#demo1 li").hover(makeTall,makeShort);
    }); // close document.ready

    function makeTall(){  $(this).animate({"height":75},200);}
    function makeShort(){ $(this).animate({"height":50},200);}
</script>

<style type="text/css" media="screen">
    .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>

BODY

<ul class="demo" id="demo1">
    <li class="p1">&nbsp;</li>
    <li class="p2">&nbsp;</li>
    <li class="p3">&nbsp;</li>
    <li class="p4">&nbsp;</li>
</ul>


hoverIntent is interchangeable with jQuery's hover. It can use the same exact onMouseOver and onMouseOut functions and it passes the same this and event objects to those functions.

HEAD

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

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#demo2 li").hoverIntent(makeTall,makeShort);
    }); // close document.ready

    function makeTall(){  $(this).animate({"height":75},200);}
    function makeShort(){ $(this).animate({"height":50},200);}
</script>

<style type="text/css" media="screen">
    .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>

BODY

<ul class="demo" id="demo2">
    <li class="p1">&nbsp;</li>
    <li class="p2">&nbsp;</li>
    <li class="p3">&nbsp;</li>
    <li class="p4">&nbsp;</li>
</ul>


To override the default configuration of hoverIntent, pass it an object as the first (and only) parameter. The object must contain "over" and "out" functions, in addition to any other options you'd like to override.

HEAD

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

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
     $("#demo3 li").hoverIntent({
            over: makeTall,
            timeout: 500,
            out: makeShort
        });
    }); // close document.ready

    function makeTall(){  $(this).animate({"height":75},200);}
    function makeShort(){ $(this).animate({"height":50},200);}
</script>

<style type="text/css" media="screen">
    .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>

BODY

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

hoverIntent


source
download

Advertisement
Tags: hover, plugin, jquery, menu, layout

Leave a Comment

No Comment

© Creative3x Ltd.