jQuery animate () меняет цвет CSS-треугольника - почему это не работает?

Question

jQuery animate () меняет цвет CSS-треугольника - почему это не работает?

0

Этот синтаксис работает с любой другой границей, которую я изменяю с помощью функции 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;
        }
    }

Почему это изменение не происходит?

Doug Smith 21 сен. 2013, в 23:19

Источник

Теги:

jquery

sass

css

jquery-ui

2 ответа

0

Простой ответ - jQuery не может анимировать свойства CSS псевдоэлементов.

Adam 21 сен. 2013, в 17:32

Ещё вопросы

apaul · Accepted Answer · 2013-09-23T01-18-00.000Z

Поскольку вы не можете выбирать псевдоэлементы, вы можете использовать небольшой скрипт для создания " 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;
}