jQuery animate（）CSS三角形的顏色變化 - 爲什麼這不工作？

Question

該語法同樣適用與所有其他邊境我與jQuery的animate()功能改變：

$(".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屬性。