jquery fading border no funciona

Question

Solo quiero algunos enlaces simples donde, si está sobrevolado, en lugar de tener una línea debajo de él repentinamente, debería desaparecer. Estoy intentando esto, pero fue en vano:

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

¿Qué debería estar haciendo?

Gracias.

Answer 1

Se necesitan algunos cambios aquí, en primer lugar se debe animar sólo el color, así:

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

también, dar la frontera un tamaño inicial por lo que no se limita a "aparecer" (cuando cambie de 0 a 1 píxel), así:

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

You can see a working demo here, para que esto funcione necesita ya sea the color plugin o jQuery UI por lo que los colores pueden animar ... núcleo no maneja colores, o la transición de nada que no sea un número.

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' }); 
    }); 
}); 
​