使用jQuery对伪元素进行动画处理 [英] Animate of pseudo elements using jQuery

问题描述

我正在使用 a：在之后，它包含右：Ypx 。

I'm using a:after, it contains right: Ypx.

我想在jQuery中使用 animate 方法移动元素（ a：在之后> ）从Ypx到Zpx，我该怎么办？

I want to use animate method in jQuery to move the element (a:after) from Ypx to Zpx, how can I do it?

例如：

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

我知道怎么做没有动画，只做 a：悬停：在{右：Zpx} 之后，但动画如何？

I know how to do it without animation, just doing a:hover:after { right: Zpx } but how with animation?

推荐答案

你是什么我试图做的是非常hacky，我强烈建议你把make元素放在一起，而不是尝试动画伪元素。但是，为了将来参考：动画伪元素的唯一方法是插入样式标记并更改实际CSS中的值，例如...

What you are trying to do is extremely hacky and I'd strongly recommend you to put make real elements instead of trying to animate pseudo-elements. However, for future reference: the only way of animating a pseudo-element is by inserting a style tag and changing the value in actual CSS, such as...

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 ，但你可以在jquery的 animate 中使用步骤回调来挂钩到jquery的缓动和计时功能。

This is vanilla js, but you could use the step callback in jquery's animate to hook in to jquery's easing and timing functions.

这篇关于使用jQuery对伪元素进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！