jQuery animate（）CSS三角形的颜色改变-为什么不'；这不管用吗？

此语法适用于我使用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;
        }
    }

---

为什么没有发生更改？

简单回答-jQuery无法为伪元素的CSS属性设置动画。

鉴于您无法选择伪元素，您可以使用一个小脚本创建一个“”，或者换言之，您可以插入一个真实的元素，并为其设置动画

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

你好，世界
$（“.inner”）.prepend（“”）；
$（'.tri'）。设置动画({
borderTopColor:“#59b4de”，
borderLeftColor:'透明'，
borderRightColor:“透明”，
borderBottomColor:“#59b4de”
}, 300);
.内部{
保证金：自动；
填充顶部：20px；
位置：相对位置；
宽度：400px；
}
崔先生{
边框：实心；
边框颜色：#3c6ea5透明；
边框宽度：14px 16px 0 16px；
位置：绝对位置；
底部：-107px；
右：-50px；
}