jQueryを使用した疑似要素のアニメーション

Question

私はa:afterを使用していますが、これにはright: Ypxが含まれています。

要素（a:after）をYpxからZpxに移動するにはanimateメソッドをjQueryで使いたいのですが、どうすればいいですか？例えば

：

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

私はちょうどa:hover:after { right: Zpx }をやって、アニメーションせずにそれを行う方法を知っているが、どのようにアニメーションで？

Answer 1

あなたがしようとしていることは非常にハッキーです。疑似要素をアニメートするのではなく、本当の要素を作ることを強くお勧めします。しかしながら、将来の参照のために：擬似要素をアニメーション化する唯一の方法は、

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/

... styleタグを挿入しような実際のCSS、の値を変更することによって、これはバニラ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

次の使用（）の代わり。 Here's howあなたはそれを正確に達成することができます。