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

看看你如何选择伪元素，你可以使用一个小脚本来创建一个＆＃34; pseudo-pseudo-element＆＃34;，或者换句话说，你可以插入一个真实元素.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属性设置动画。

jQuery animate（）颜色的CSS三角形变化 - 为什么这不起作用？

2 个答案: