使用jQuery对伪元素进行动画处理

Question

我正在使用a:after,它包含right: Ypx.

我想animate在jQuery中使用方法将元素(a:after)从Ypx移动到Zpx,我该怎么办呢？

例如:

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

我知道如何在没有动画的情况下做到这一点,只是做了a:hover:after { right: Zpx }但动画怎么做？

Answer 1

你要做的是非常hacky,我强烈建议你把make元素放在一起,而不是尝试动画伪元素.但是,为了将来参考:动画伪元素的唯一方法是插入style标记并更改实际CSS中的值,例如......

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/

这是vanilla js,但你可以使用stepjquery中的回调animate来挂钩到jquery的缓动和计时功能.