Mục tiêu: trước và: after giả yếu tố với jQuery

Question

thể trùng lặp:
Manipulating CSS pseudo-elements using JQuery

On pageload tôi muốn: trước và: sau khi các yếu tố trên một lớp học để xuất hiện. Tôi đã thiết lập .lifted: trước và .lifted: sau khi được opacity: 0 trong css. Trong tài liệu sẵn sàng, tôi có:

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

Điều này không hiệu quả. Và sau đó, trình điều khiển jQuery chỉ được thực hiện để chèn nội dung theo như tôi có thể nói.

Có cách nào tôi có thể thao tác css của các phần tử giả này bằng jQuery không?

Answer 1

Quyết định đi với giải pháp thêm lớp khi tải vào phần tử và sau đó thao tác nó trong 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 */