Этот синтаксис работает с любой другой границей, которую я изменяю с помощью функции jQuery animate()
:
$(".contact .inner:before").animate({borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de'}, 300);
Но для моего CSS-треугольника (который действует как индикатор в нижней части popover, который у меня есть) это изменение вообще не происходит.
Здесь CSS/SASS для моего треугольника:
.inner {
margin: auto;
padding-top: 20px;
position: relative;
width: 400px;
&:before {
border: solid;
border-color: #3c6ea5 transparent;
border-width: 14px 16px 0 16px;
bottom: -107px;
content: "";
display: block;
position: absolute;
right: -50px;
}
}
Почему это изменение не происходит?
Поскольку вы не можете выбирать псевдоэлементы, вы можете использовать небольшой скрипт для создания " Pseudo- Pseudo- элемента ", или, другими словами, вместо этого вы можете вставить реальный элемент с .prepend() и анимировать.
<div class="inner">hello world</div>
$(".inner").prepend('<div class="tri"/>');
$('.tri').animate({
borderTopColor: '#59b4de',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#59b4de'
}, 300);
.inner {
margin: auto;
padding-top: 20px;
position: relative;
width: 400px;
}
.tri {
border: solid;
border-color: #3c6ea5 transparent;
border-width: 14px 16px 0 16px;
position: absolute;
bottom: -107px;
right: -50px;
}
Простой ответ - jQuery не может анимировать свойства CSS псевдоэлементов.