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的step中的animate回调来连接到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（）。 Here's how你可以做到这一点。

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

3 个答案: