JQuery анимировать цвет границы при наведении?

Использование цветного плагина для анимации цвета фона при наведении указателя мыши.

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

Как я могу сделать то же самое для цвета границы?

Ответ 1

Найдено в google

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

он должен быть "borderTopColor" (или слева, справа, снизу) вместо "borderColor".

Ответ 2

Чтобы оживить цвет всей границы:

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

По-видимому, вам нужно указать их все.

Ответ 3

это тоже работает.

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

Ответ 4

У меня была аналогичная проблема. По-видимому, у меня не было файла jQuery-UI, прикрепленного к моему документу. Однажды я прикрепил его. Все работает отлично с ответом "C. Spencer Beggs".

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

Ответ 5

jQuery animate принимает только числовые значения. См. [Docs]: http://api.jquery.com/animate/

Вы можете использовать плагин jQuery.Color или использовать jQuery UI, который расширяет анимацию и позволяет использовать нечисловые значения в анимации.

Enjoy

Ответ 6

В качестве альтернативы решениям jQuery вы можете анимировать цвет границы с переходами CSS. Поскольку вы анимации 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>

Ответ 7

Вы можете попробовать следующее:

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