悬停时jQuery动画边框颜色？

Question

使用颜色插件在悬停时为背景颜色设置动画.

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

如何为边框颜色做同样的事情？

Answer 1

在谷歌找到

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

它必须是"borderTopColor"(或左,右,下)而不是"borderColor".

Answer 2

要为整个边框的颜色设置动画,请使用:

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

显然,您需要全部指定它们.

Answer 3

这也有效.

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

Answer 4

我有类似的问题.我显然没有附加到我的文档的jQuery-UI文件.一旦我附上它.一切都与"C. Spencer Beggs"的答案完美配合.

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