jQuery animate border color on hover?

Question

Using a color plugin to animate background color on hover.

$(function(){   
$('.listing-2 li a').mouseover(function() {
 $(this).animate({ backgroundColor: "#0e7796" }, 'fast');
});
$('.listing-2 li a').mouseout(function() {
 $(this).animate({ backgroundColor: "#d6f2c5" }, 'fast');
});

});

How can I do the same for border color?

Answer 1

Found in google

    $('.listing-2 li a').mouseover(function() {
 $(this).animate({ borderTopColor: "#0e7796" }, 'fast');
});
$('.listing-2 li a').mouseout(function() {
 $(this).animate({ borderTopColor: "#fff" }, 'fast');
});

it must be a "borderTopColor" (or left, right, bottom) instead of "borderColor".

Answer 2

To animate the color of the entire border use:

$(this).animate({ borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de' }, 'fast');

Apparently, you need to specify them all.

Answer 3

try this $(this).animate({border: "3px solid #FFF55B"}, 100);

Answer 4

ho provato con questo metodo ma a me non funziona???