0

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

为什么没有发生变化？

4

2 回答 2

1

看到你不能选择伪元素，你可以使用一个小脚本来创建一个“伪伪元素”，或者换句话说，你可以用.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;
}
于 2013-09-23T04:16:24.530 回答
0

简单的答案 - jQuery 不能为伪元素的 CSS 属性设置动画。

于 2013-09-21T20:26:41.977 回答