Animate di pseudo elementi usando jQuery

Question

Sto usando a:after, contiene right: Ypx.

Desidero utilizzare il metodo animate in jQuery per spostare l'elemento (a:after) da Ypx a Zpx, come posso farlo?

Ad esempio:

[link-text][after] 
[link-text]-- moving > --[after] 

so come farlo senza animazione, solo facendo a:hover:after { right: Zpx } ma come con l'animazione?

Answer 1

Quello che stai cercando di fare è estremamente hacky e ti consiglio vivamente di creare elementi reali invece di provare ad animare pseudo-elementi. Tuttavia, per riferimento futuro: l'unico modo di animare una pseudo-elemento è inserendo un tag style e cambiando il valore effettivo CSS, come ...

var styles = document.getElementById("pseudo-mover") 
var distance = 100; 

var move = function(){ 
    styles.innerHTML = ".box:after {left: " + distance + "px}"; 
    distance++; 
    if (distance < 200) 
     setTimeout(move, 30);  
} 

move() 

http://jsfiddle.net/X7aTf/

Questo è js vaniglia , ma è possibile utilizzare la richiamata step in jQuery's animate per collegarsi alle funzioni di andamento e di timing di jquery.

Answer 2

È possibile utilizzare le transizioni CSS3 per ottenere questo risultato, ma purtroppo sono supportati (per quanto ne so) in FireFox 4+ al momento.

http://jsfiddle.net/XT6qJ/1/

#foo:after{ 
    content:'!'; 
    display:inline-block; 
    border:solid 1px #f00; 
    padding:3px; 
    width:25px; 
    text-align:center; 
    -webkit-transition:margin-left 1s; 
    -moz-transition:margin-left 1s;  
    -ms-transition:margin-left 1s; 
    -o-transition:margin-left 1s;  
    transition:margin-left 1s;  
} 
#foo:hover:after{ 
    margin-left:100px;  
} 

Answer 3

Usa next(), invece. Here's how è possibile ottenere esattamente questo.