9

私が使用しているa:after、それは含まれていますright: Ypx。

animatejQueryのメソッドを使用して要素（）をYpxからZpxに移動したいのですがa:after、どうすればよいですか？

例えば：

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

私はアニメーションなしでそれを行う方法を知ってa:hover:after { right: Zpx }いますが、アニメーションを使用する方法はありますか？

4

3 に答える 3

8

あなたがやろうとしていることは非常にハックであり、疑似要素をアニメーション化しようとする代わりに、実際の要素を作成することを強くお勧めします. ただし、将来の参考のために: 疑似要素をアニメーション化する唯一の方法は、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/

これはバニラ js ですがstep、jquery のコールバックを使用animateして、jquery のイージングおよびタイミング関数にフックすることができます。

于 2012-09-12T20:22:11.107 に答える
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;    
}
于 2012-09-12T17:17:08.683 に答える
-4

代わりにnext（）を使用してください。これがまさにそれを達成する方法です。

于 2012-09-12T19:42:25.447 に答える