0

この構文は、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;
        }
    }

変化が起こらないのはなぜですか？

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 に答える