web-dev-qa-db-fra.com

Cible: avant et: après les pseudo-éléments avec jQuery

Duplicata possible:
Manipulation des pseudo-éléments CSS à l'aide de JQuery

Sur pageload, je veux que les éléments: avant et: après d'une classe apparaissent. J'ai mis le .lifted: avant et .lifted: après être opacité: 0 dans le css. Dans le document prêt, j'ai:

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

Ça ne marche pas. Et le manipulateur .after jQuery est uniquement conçu pour insérer du contenu pour autant que je sache.

Existe-t-il un moyen de manipuler le CSS de ces pseudo-éléments à l'aide de jQuery?

jquerypseudo-element
25
Erik Veland

Décidé d'aller avec la solution d'ajouter une classe en charge à l'élément puis de la manipuler dans le 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