Animación de pseudo elementos usando jQuery

Estoy usando a:after, contiene right: Ypx.Animación de pseudo elementos usando jQuery

Quiero usar el método animate en jQuery para mover el elemento (a:after) de Ypx a Zpx, ¿cómo puedo hacerlo?

Por ejemplo:

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

sé cómo hacerlo sin animación, simplemente haciendo a:hover:after { right: Zpx } pero la forma con la animación?

Fuente

2012-09-12 Luis

No estoy seguro de que jquery pueda hacer esto. Sin embargo, es posible que pueda usar animaciones CSS3 para lograr esto (creo), pero no sería compatible con navegadores que no sean CSS3, por supuesto, los navegadores no CSS3 generalmente no admiten la pseudoetiqueta ': after'. .. – Shmiddty

@Shmiddty: ¿Por qué no? ': after' ni siquiera es nuevo en CSS3. – BoltClock

@BoltClock Tienes razón. Fue agregado en CSS2. Mi error. – Shmiddty

Lo que estás tratando de hacer es extremadamente hacky y te recomiendo encarecidamente que pongas elementos reales en lugar de intentar animar pseudo-elementos. Sin embargo, para referencia futura: la única manera de animar un pseudo-elemento es mediante la inserción de una etiqueta style y cambiando el valor real de CSS, como ...

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/

Esto se js vainilla , pero puede usar la devolución de llamada step en jquery's animate para enganchar las funciones de aceleración y temporización de jquery.

Fuente

2012-09-12 20:22:11 Duopixel

Ok, está funcionando, por supuesto, pero el movimiento no es astuto. Creo que debería esperar algunas soluciones en el futuro. Gracias. – Luis

No, no espere soluciones futuras (no habrá ninguna). Debe cambiar su código y usar elementos reales en lugar de pseudo-elementos. – Duopixel

Lo único que puedo hacer es Link y no creo que sea semántico, ¿qué opinas? – Luis

Puede usar las transiciones CSS3 para lograr esto, pero lamentablemente solo son compatibles (hasta donde yo sé) en FireFox 4+ en este 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;  
}

Fuente

2012-09-12 17:17:08 Shmiddty

Son compatibles con muchos otros navegadores: http://caniuse.com/css-transitions ... de lo contrario, ¿cuál sería el objetivo de esos prefijos en tu código? – tuff

@tuff Sí, pero no en los pseudo elementos. – Shmiddty

Desafortunadamente no puedo permitirme no apoyar a los otros navegadores, por lo que esta solución en CSS3 no me va a funcionar. :-\ Pero gracias de todas maneras. – Luis

-3

Uso siguiente() en su lugar. Here's how puede lograr exactamente eso.

Fuente

2012-09-12 19:42:25 Izaias

-1 Completamente perdido el punto de la pregunta. Esto es CSS pseudo-elemts - el selector ': after'. – frnhr

Animación de pseudo elementos usando jQuery

Respuesta

Cuestiones relacionadas