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

Question

Этот синтаксис работает с любой другой границы меняю с animate() функции JQuery в:

$(".contact .inner:before").animate({borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de'}, 300); 

Но для моего CSS треугольника (который действует как индикатор в нижней части пирог у меня есть) изменение не происходит вообще.

Вот 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; 
     } 
    } 

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

Answer 1

Поскольку вы не можете выбирать псевдоэлементы, вы можете использовать небольшой скрипт для создания «pseudo-pseudo-element», или, другими словами, вы можете вставить реальный элемент с помощью .prepend() и вместо этого оживить его.

Working Example

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

Answer 2

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