clipped from: Timeout your Mouseovers Jul 5, 2006
This is a fun effect I built for Chowhound that does one better for mouseovers. The problem with most menu systems is that they're really touchy whether you're too fast or slow with the mouse.
The trick is to use a timeout with the effect, so it will wait a fraction of a second to pop-up, and a fraction of a second to go away...just enough to make the effect feel solid and not finicky.
I won't take credit for the idea, it was inspired from Amazon's website when you roll over the "See All 34 Product Categories" tab at the top. Play with the example below:
Roll It
By keeping your mouse hovering over this div or over the link that made it appear, it will stay open.
But, if you roll away from this div, it will roll back up.
Here's a bunch of other content
And here's the code to it (you will also need prototype.js and effects.js):
<script type="text/javascript">
var RollIt = {
timeout : null,
showPopup : function(){
clearTimeout(this.timeout);
if($('rollit').style.display == 'none'){
this.timeout = setTimeout(function(){new Effect.BlindDown('rollit', {duration:.3, fps:40})},400);
}
},
hidePopup : function(){
if($('rollit').style.display == 'none'){
clearTimeout(this.timeout);
}else{
this.timeout = setTimeout(function(){new Effect.BlindUp('rollit', {duration:.3, fps:40})},300);
}
}
}
script>