jQuery在悬停时设置边框颜色动画?

在谷歌找到

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

它必须是“borderTopColor”(或左、右、下)而不是“borderColor”。

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

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

我也有类似的问题。显然,我的文档中没有附加jqueryui文件。一旦我贴上它。“C.斯宾塞·贝格斯”的回答一切都很完美。

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

这也行得通。

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

jQuery动画只接受数值。见[文件]: http://api.jquery.com/animate/

您可以使用jQuery.Color插件,也可以使用jQuery UI,它扩展了animate并允许您在animate中使用非数值。

享受

background-color 具有 fast ,您可能想使用 200ms

.listing-2 li {
    border:1px solid #d6f2c5;
    transition: border 200ms ease-in-out;
}

.listing-2 li a:hover {
    border:1px solid #0e7796;
}

一般示例

body {
  display: flex;
  justify-content: center;
}
.container {
  width: 50px;
  height: 50px;
  border: 1px solid #d6f2c5;
  transition: border 200ms ease-in-out;
}
.container:hover {
  border: 1px solid #0e7796;
}

<div class="container"></div>

你可以试试这个:

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