tomhoppe.com

On one of my side projects I wanted to do a hover over fade on and off menu, but wanted to do the menu items with text instead of images. After thinking about how to get the effect, I settled on the below solution. I also wanted a slight delay on the mouse over. That way, if someone just went through the links instead of on them, they wouldn’t get the fade.

HTML looks like this. The only drawback is for accessibility, that they get the link text twice. Not that big of a deal IMHO.

<ul>
    <li><a href="sports.php"><span class="off">Sports</span><span class="on">Sports</span></a></li>
    <li><a href="concerts.php"><span class="off">Concerts</span><span class="on">Concerts</span></a></li>
    <li class="last"><a href="theater.php"><span class="off">Theater</span><span class="on">Theater</span></a></li>
</ul>

Then the JS comes in and does a nice smooth fade on the “off” class. This allows you to get a fade rather then an instant “on” like you get when you just change classes and colors on the a element. I do a jQuery hover.

When it does the “mouseover”, it sets a class on the main list item its hovering on, that way the global scope of setTimeout will allow you to target that particular element to fade its child. The 100 ms delay is enough to get rid of most of the inadvertent hovers. If using this particular piece of code for something else, you can make that delay as long as you want for a delayed hover. Then the “off” state fades out.

The “mouseout” from the hover then clears the timeout and fades the “off” state back in and removes the hovering class as you don’t need it anymore.

$('#header li').hover(
function() { $(this).addClass('hover'); hover_intent = setTimeout( function(){ $('#header .hover').find('.off').fadeOut("fast"); } , 100 ); },
function() { try{clearTimeout(hover_intent);}catch(e){}; $('#header .hover').find('.off').fadeIn("fast"); $(this).removeClass('hover'); });

This entry was posted on Wednesday, April 22nd, 2009 at 3:07 pm and is filed under All, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.