Анимация псевдоэлементов с использованием jQuery

Я использую a:after, он содержит right: Ypx.Анимация псевдоэлементов с использованием jQuery

Я хочу использовать метод animate в jQuery для перемещения элемента (a:after) от Ypx до Zpx, как я могу это сделать?

Например:

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

Я знаю, как сделать это без анимации, просто делать a:hover:after { right: Zpx }, но как с анимацией?

источник

2012-09-12 Luis

Я не уверен, что jquery может это сделать. Тем не менее, вы можете использовать анимацию CSS3 для выполнения этого (я считаю), но он не будет поддерживаться в браузерах, не поддерживающих CSS3, конечно, браузеры, не поддерживающие CSS3, обычно не поддерживают псевдо-тег ': after'. .. – Shmiddty

@Shmiddty: Почему бы и нет? ': after' даже не является новым для CSS3. – BoltClock

@BoltClock Вы правы. Он был добавлен в CSS2. Виноват. – Shmiddty

То, что вы пытаетесь сделать, очень хаки, и я настоятельно рекомендую вам поставить реальные элементы вместо того, чтобы пытаться анимировать псевдоэлементы. Однако, для дальнейшего использования: единственный способ анимировать псевдо-элемент является вставкой 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-12 20:22:11 Duopixel

Хорошо, это работает, конечно, но движение не пятно. Думаю, я должен ждать некоторых решений в будущем. Спасибо. – Luis

Нет, не ждите будущих решений (их не будет). Вы должны изменить свой код и использовать реальные элементы вместо псевдоэлементов. – Duopixel

Единственное, что я могу сделать, это Link , и я не думаю, что это семантический, как вы думаете? – Luis

Вы можете использовать переходы 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-12 17:17:08 Shmiddty

Они поддерживаются в большом количестве других браузеров: http://caniuse.com/css-transitions ... в противном случае, какой смысл для этих префиксов в вашем коде? – tuff

@tuff Да, но не на псевдоэлементах. – Shmiddty

К сожалению, я не могу позволить себе не поддерживать другие браузеры, поэтому это решение в CSS3 не будет работать для меня. : - \ Но спасибо вам в любом случае. – Luis

-3

Используйте следующий() вместо этого. Here's how вы можете добиться именно этого.

источник

2012-09-12 19:42:25 Izaias

-1 Полностью упустил точку вопроса. Это псевдоэлементы CSS - селектор ': after'. – frnhr

Анимация псевдоэлементов с использованием jQuery

ответ

Смежные вопросы