Jquery fading border not working

Question

I just need some simple links where, if it freezes, instead of suddenly appearing under it, it should disappear. I try 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 do?

Thank.

Answer 1

Here you need a few changes, first you should animate only the color, for example:

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

In addition, give the border its initial size so that it doesn’t just “appear” (when changing from 0 to 1px), for example:

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

, jQuery UI, ... ​​ , .

, , :

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