Animação de pseudo-elementos usando jQuery

9

Estou usando a:after , contém right: Ypx .

Eu quero usar o método animate no jQuery para mover o elemento ( a:after ) de Ypx para Zpx, como posso fazer isso?

Por exemplo:

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

Eu sei como fazer isso sem animação, só fazendo a:hover:after { right: Zpx } mas como com animação?

    
por Luis 12.09.2012 в 19:06
fonte

3 respostas

7

O que você está tentando fazer é extremamente hacky e eu recomendo fortemente que você coloque elementos reais em vez de tentar animar pseudo-elementos. No entanto, para referência futura: a única maneira de animar um pseudoelemento é inserir uma tag style e alterar o valor no CSS real, como ...

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()

link

Isso é vanilla js, mas você pode usar o retorno de chamada step no animate do jquery para conectar-se às funções de atenuação e temporização do jquery.

    
por Duopixel 12.09.2012 / 22:22
fonte
2

Você pode usar as transições CSS3 para fazer isso, mas infelizmente elas só são suportadas (até onde eu sei) no FireFox 4+ agora.

link

#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;    
}
    
por Shmiddty 12.09.2012 / 19:17
fonte
-3

Use next () em vez disso. Veja como você pode conseguir exatamente isso.

    
por Izaias 12.09.2012 / 21:42
fonte