jQuery

Question

kullanarak sözde öğeleri oluşturma a:after kullanıyorum, right: Ypx içeriyor.

JQuery'de animate yöntemini kullanmak için (a:after) Ypx - Zpx öğesinden taşımak için nasıl yapabilirim? Örneğin

:

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

ben, animasyon olmadan bunu nasıl biliyor sadece animasyon ile a:hover:after { right: Zpx } ama nasıl yapıyor?

Answer 1

Yapmaya çalıştığınız şey son derece rahatsızlık verici ve sahte öğeler oluşturmaya çalışmak yerine gerçek öğeler oluşturmanızı şiddetle tavsiye ediyorum. Ancak, ileride başvurmak üzere: Bir sözde elemanı canlandırmanın tek yolu

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/

... Bir style etiketinin yerleştirilmesini ve bu şekilde gerçek CSS, değeri değiştirerek Bu vanilya js olduğunu Ancak jquery'nin animate numaralı telefonundaki step geri bildirimini jquery'nin hareket hızı ve zamanlama işlevlerine bağlamak için kullanabilirsiniz.

Answer 2

Bunu yapmak için CSS3 geçişlerini kullanabilirsiniz, ancak ne yazık ki şu anda sadece FireFox 4+ içinde desteklenmektedir (bildiğim kadarıyla). Bir sonraki

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

Kullanım() yerine. Here's how tam olarak bunu başarabilirsiniz.