jQuery Font Color Animate On Hover Not Working

Question

I am using the following code to attempt to get the font color of my navigation links to animate on hover/off hover. The border bottom color changes correctly but the font color does not. Also it is throwing off my current-menu-item CSS rule for a different color. The desired behavior would be for the font color to go blue on hover and revert to off white off hover, unless it is the current-menu-item which should be font color yellow. I am a novice at this so please excuse my lack of style. I have included the jQuery UI file for color support. Any help is greatly appreciated. Full example can be seen here http://www.buenolisto.com/alma

JS

        jQuery("li.social").hover(function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "-=20px"}, 'fast');
    }, function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "+=20px"}, 'fast');
    })
    jQuery("li.reservas").hover(function(){
        jQuery(this).find("img").stop(true, true).fadeOut({'marginTop': "-=30px"}, 'slow');
    }, function(){
        jQuery(this).find("img").stop(true, true).fadeIn({'marginTop': "+=30px"}, 'slow');
    })
    jQuery('ul.menu li a').hover(function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#2E9ECE",'color': "#FEFEFE"}, 'slow');
    }, function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#FFDF85",'color': "#2E9ECE"}, 'fast');
    })

in your code nowhere you are playing with font-color property — , Jun 15 '12 at 12:40
Please can you try and isolate the code that is causing the problem, perhaps in [jsFiddle](http://jsfiddle.net/)? Some of the jQuery events in your question have nothing to do with the problem (for example the `li.social` event bind is for your social icons and not the menu. — andyb, Jun 15 '12 at 12:47
@Somebodyisintrouble I think the `'color': "#2E9ECE"` in the `.animate()` will disagree with you — andyb, Jun 15 '12 at 12:48
@andyb i think op always highlights their problem but color property is overflowed in div — , Jun 15 '12 at 12:58
btw mainly animate function is to animate numeric value http://api.jquery.com/animate/ — , Jun 15 '12 at 13:01
@Somebodyisintrouble Unless you include jQueryUI, which the OP has — andyb, Jun 15 '12 at 13:03

andyb · Accepted Answer · 2012-06-15T13:23:13.360

To answer one part about the font colours. The colours are the wrong way around!

'color':'#2E9ECE' should be in the first function inside the .hover() and #FEFEFE should be in the second function.

The full updated code should be:

jQuery('ul.menu li a').hover(function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#2E9ECE', color:'#2E9ECE'}, 'slow');
    Cufon.refresh(this);
}, function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#FFDF85', color:'#FEFEFE'}, 'fast');
    Cufon.refresh(this);
})

Note: With the animate({}) syntax, you do not need to quote the properties.

Edit: Second part of the question:

To exclude the currently selected menu item from the hovering code you can update the jQuery selector to .not() include the list item with the current-menu-item class

jQuery('ul li a:not(.current-menu-item)').hover(...)

which should fix the second part of your problem.

Edit 2: Since you are using Cufon to render the fonts, you need to refresh that after setting the using jQuery otherwise it will be rendered in the colour the text was originally (which is white). Adding Cufon.refresh(this); to both methods might have some effect but I can't test it since you didn't provide editable source code.

After reading up on this, I don't think Cufon fonts can be animated - see https://groups.google.com/forum/?fromgroups#!topic/cufon/RFfz6DDY0wU so you should either use CSS3 fonts, which can be animated or keep the Cufon fonts and simply have the font color change from white to blue on hover, rather than be animated.

I have take your suggestion and used the code provided, in fact this is how I originally had it. The behavior is still wrong however. Now what happens is the font color does not animate/change (remains off-white) on hover...and it changes to the blue with mouseout off hover. Obviously the current-menu-item piece is a different problem and is still broken...please send site link provided above for an example of the current behavior. Thanks for your assistance. — john-marcello, Jun 15 '12 at 13:13
Actually, I don't think the font colour can be animated because it is not a real font. You are using the Cufon fonts which exist (in my browser) as ` — andyb, Jun 15 '12 at 13:27
Andy I appreciate the insight and thank you for looking into this. Can you describe where to insert the cufon refresh statement. I will experiment with this in the morning. Cheers! — john-marcello, Jun 16 '12 at 00:35
@user1447958 My answer already contains the `Cufon.refresh` command but as I said, I do not think it is possible to animate a Cufon font, so it probably will not make a difference. — andyb, Jun 16 '12 at 08:11

jQuery Font Color Animate On Hover Not Working

1 Answers1