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

Question

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

我想使用animatejQuery 中的方法将元素 ( a:after) 从 Ypx 移动到 Zpx，我该怎么做？

例如：

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

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

Answer 1

您正在尝试做的事情非常hacky，我强烈建议您制作真实元素，而不是尝试为伪元素设置动画。但是，供将来参考：为伪元素设置动画的唯一方法是插入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 的缓动和计时功能。

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() 代替。这是您如何实现这一目标的方法。