悬停时jQuery动画边框颜色？

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?

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

7 个解决方案

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

它必须是“borderTopColor”（或左，右，下）而不是“borderColor”。

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

显然，您需要全部指定它们。

#3

this works also.

这也有效。

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

#4

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>

#5

jQuery animate only accept numeric values. See [docs]: http://api.jquery.com/animate/

jQuery动画只接受数值。见[docs]：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，并允许您在动画中使用非数字值。

Enjoy

请享用

#6

As an alternative to the jQuery solutions, you can animate the border color with CSS transitions as well. Since you're animating the background-color with fast, you'd want to use a 200ms transition.

作为jQuery解决方案的替代方案，您还可以使用CSS过渡为边框颜色设置动画。由于您要快速为背景颜色设置动画，因此您需要使用200毫秒的过渡。

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>

#7

-5

You could try this:

你可以试试这个：

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

#1