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);