Printable Version of Topic

Click here to view this topic in its original format

Forums _ Webmasters' Corner _ jQuery Fading Rollovers

Posted by: Mikeplyts Aug 16 2010, 08:17 AM

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?

Posted by: Mikeplyts Aug 16 2010, 03:40 PM

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.

Posted by: Mikeplyts Aug 16 2010, 05:58 PM

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.