hover时jQuery动画边框颜色？

使用颜色插件在hover时为背景颜色设置动画。

$(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”的答案完美配合。

Answer 5

jQuery动画只接受数值。 见[docs]： http ： //api.jquery.com/animate/

您可以使用jQuery.Color插件或使用扩展动画的jQuery UI，并允许您在动画中使用非数字值。

请享用

Answer 6

作为jQuery解决方案的替代方案，您还可以使用CSS过渡为边框颜色设置动画。 由于您要fast为background-color动画，因此您需要使用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; } 

Answer 7

你可以试试这个：

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