jQuery 动画边框颜色悬停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/813493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate border color on hover?
提问by Mike
Using a color pluginto 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?
我怎样才能对边框颜色做同样的事情？
回答by Mike
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".
它必须是“borderTopColor”（或左、右、下）而不是“borderColor”。
回答by C. Spencer Beggs
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.
显然，您需要全部指定它们。
回答by michael
this works also.
这也有效。
$("div.item").hover(function() {
$(this).stop().animate({"border-color": "#999999"}, "slow");
},
function() {
$(this).stop().animate({"border-color": "#BFBFBF"}, "slow");
});
回答by iRebel_85
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.
我有一个类似的问题。我显然没有将 jQuery-UI 文件附加到我的文档中。一旦我附上了它。一切都与“C. Spencer Beggs”的答案完美契合。
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
回答by jhmilan
jQuery animate only accept numeric values. See [docs]: http://api.jquery.com/animate/
jQuery 动画只接受数值。见[文档]：http: //api.jquery.com/animate/
You may use jQuery.Color plugin or use jQuery UI which extends animate and lets you use non-numeric values in animate.
您可以使用 jQuery.Color 插件或使用 jQuery UI 扩展 animate 并允许您在 animate 中使用非数字值。
Enjoy
享受
回答by Matthew Johnson
As an alternative to the jQuery solutions, you can animate the border color with CSS transitions as well. Since you're animating the background-colorwith fast, you'd want to use a 200mstransition.
作为 jQuery 解决方案的替代方案，您还可以使用 CSS 过渡为边框颜色设置动画。由于您的动画background-color用fast，你想使用一个200ms过渡。
Your Case
您的案例
.listing-2 li {
border:1px solid #d6f2c5;
transition: border 200ms ease-in-out;
}
.listing-2 li a:hover {
border:1px solid #0e7796;
}
Generic Example
通用示例
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>回答by John
You could try this:
你可以试试这个：
$(this).animate({border: "3px solid #FFF55B"}, 100);
