web-dev-qa-db-ja.com

jQueryを使用して：beforeおよび：after疑似要素をターゲットにします

可能性のある複製：
JQueryを使用したCSS擬似要素の操作

ページロードでは、クラスの：beforeおよび：after要素を表示する必要があります。 cssで.lifted：beforeと.lifted：afterをopacity：0に設定しました。準備ができたドキュメント内で：

$(".lifted:before").css("opacity", "1");
$(".lifted:after").css("opacity", "1");

これは機能しません。そして、.after jQueryマニピュレーターは、私が知る限り、コンテンツを挿入するためだけに作られています。

JQueryを使用してこれらの擬似要素のCSSを操作する方法はありますか？

jquerypseudo-element
25
Erik Veland

ロード時にクラスを要素に追加し、CSSで操作するというソリューションを採用することにしました。

$(".lifted").addClass("on");

CSS

.lifted.on:before,
.lifted.on:after {
               opacity: 1;
    -webkit-transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
         -o-transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
            transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1);
       -moz-transition: none /* Removed until FF4 hang bug is fixed */
24
Erik Veland