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

Question

我正在使用a:after ，它包含right: Ypx 。

我想在jQuery中使用animate方法将元素（ 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，但你可以在jquery的animate使用step回调来挂钩到jquery的缓动和计时功能。

Answer 2

您可以使用CSS3过渡来完成此任务，但遗憾的是，它们目前仅在FireFox 4+中受支持（据我所知）。

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

请改用next（）。 以下是您如何实现这一目标的方法。