Log In · Register

 

Help Topic Rules and Requirements

For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Staff Member of the Month | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources

Submission Guidelines

 
Reply to this topicStart new topic
jQuery Fading Rollovers
Mikeplyts
post Aug 16 2010, 08:17 AM
Post #1


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291



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
post Aug 16 2010, 03:40 PM
Post #2


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291



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
post Aug 16 2010, 05:58 PM
Post #3


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291



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.
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: