jquery fading border not working

Question

I just want some simple links where if it's hovered over, instead of having a line appear under it suddenly, it should fade. I'm trying this, but to no avail:

$(document).ready(function(){
    $('#footer a').mouseover(function(){
    $(this).animate({
        border-bottom: 'border-bottom: 1px solid #D8D8D8'
        }, 1000, function() {
        // Animation complete.
    });
    });
});

What should I be doing?

Thanks.

Answer 1

You need a few changes here, first you should animate only the color, like this:

$(function(){
    $('#footer a').mouseover(function(){
    $(this).animate({
        borderBottomColor: '#D8D8D8'
        }, 1000, function() {
        });
    });
});​

Also, give the border an initial size so it doesn't just "appear" (when changing from 0 to 1px), like this:

​​#footer a { border-bottom: solid 1px transparent; }​

You can see a working demo here, to make this work you need either the color plugin or jQuery UI so the colors can animate...core doesn't handle colors, or transitioning anything that's not a number.

Here's a more complete demo, probably what you're ultimately after:

$(function(){
    $('#footer a').hover(function(){
        $(this).animate({ borderBottomColor: '#D8D8D8' });
    }, function() {
        $(this).animate({ borderBottomColor: 'transparent' });
    });
});
​