Fade on hover text link color

Question

Im trying to do a text link fade hover effect. Im trying to change the color through .css()-function. The colors are changing but the .fadeIn()-function doesn't work. What am I doing wrong and how do I solve it?

$('#menu li a').hover(
        function() {
            $(this).css('color','#fff').fadeIn();
        },
        function() {
            $(this).css('color','#000').fadeIn();
        }
    );

Answer 1

.fadeIn() in will not fade in the text that from your .css() func. It's used with the .fadeOut() function, to show or hide a object on screen. To fade in a color change you need to use .animate() - this is a working example here using this plugin found here.

$('a').mouseover(function(){

    // #FFFFFF = color to fade | 100 = time of fading
    $(this).animate({color:'#FFFFFF'},100);
    $(this).animate({color:'#000000'},100);

}).mouseout(function(){

    // this get called when mouse leaves.
    // Set the color to default color blue        
    $(this).animate({color:'blue'},100);

    });

Note it is better to use .mouseover() / .mouseout() then use hover as it create problems (reblinking and recoloring) here and example of this bug: http://jsfiddle.net/EFgma/54/

Hope this helps.

Answer 2

You either need to animate the colors after you include jQuery UI (or jQuery color):

$('#menu li a').hover(
    function() { $(this).animate("color", "#FFFFFF"); },
    function() { $(this).animate("color", "#000000"); }
}

Or use CSS3 transitions (avoiding jQuery altogether):

.menu li a {
    color: #000000;
    transition: 1s color; /*animates for 1 second*/
    -moz-transition: 1s color; /*For Firefox < 16.0*/
    -webkit-transition: 1s color; /*For WebKit (Chrome, Safari)*/
}
.menu li a:hover {
    color: #FFFFFF;
}

However, CSS3 transitions' support is limited; it isn't supported in IE <= 9 (although it is supported in the soon-to-come IE10).

Answer 3

As always, I'd like to advocate the "progressive enhancement" approach, just because I'm anal retentive.
Don't accept this answer, as it doesn't directly answer your question.

Features that don't add functionality to a website should be carefully weighted: a color fade on the links isn't that vital, I think. So why should everyone visiting your site download jQuery + jQuery UI only for that "feature"?

Add transitions only to those who support transitions. It's also easier for you to maintain this code. It's also hardware accelerated on mobile devices.

.menu li a {
    color: #000000;
    -webkit-transition: color 1s linear;
    -moz-transition: color 1s linear;
    -ms-transition: color 1s linear;
    transition: color 1s linear;
}
.menu li a:hover {
    color: #FFFFFFF;
}

Maybe the people that use obsolete browsers (IE <= 9) will get it, that they need to update or change, if not every single site is developed "for them" and at the cost of all others.