Help - Search - Members - Calendar
Full Version: jQuery Fading Rollovers
Forums > Resource Center > Webmasters' Corner
Mikeplyts
Okay, so, I'm designing some stuff and I came to an interesting problem. I can't seem to get the navigation links to have the smooth fading effect that I'd want them to have. Mind you, I'm using a sprite for the navigation. So, yeah.

The only thing I can pretty much do is make it fade in and out from a low opacity. Like this:

CODE
$(function() {
    $('#navigation a').fadeTo('fast', 0.6);
    $('#navigation a').hover(function() {
        $(this).stop().fadeTo('slow', 1);
    }, function() {
        $(this).stop().fadeTo('slow', 0.6);
    });
});


But, I just want it to fade on it's hover state. I've tried a few plugins already, but none of them really seem to work. More so, it'd be nice to not use a plugin for what I assume is a simple effect. Help?
Mikeplyts
No, I don't really want it to fade. That was just lack for a better word. I want it to have a smooth transition from the regular state of the rollover to the hover state of the rollover. The code I provided just showed how that fading transition was smooth.
Mikeplyts
Never mind, I used a different method. Instead of trying to fade the actual hover state of the rollover, I just assigned the hover state to a span tag within the anchor tags and set its opacity to zero. That way, when the contents of the span tags are hovered upon, it will animate its opacity to one and back to zero when its not hovered upon.

So, f*cking, simple.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.