jQuery animate border color on hover?

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?

Solution 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".

Solution 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.

Solution 3:

I had a similar issue. I apparently didn't have the jQuery-UI file attached to my document. Once I attached it. Everything works perfectly with "C. Spencer Beggs" answer.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

Solution 4:

this works also.

$("div.item").hover(function() {
    $(this).stop().animate({"border-color": "#999999"}, "slow");
},
function() {
    $(this).stop().animate({"border-color": "#BFBFBF"}, "slow");
});