使用jQuery实现伪元素的动画效果

Question

使用jQuery实现伪元素的动画效果

9

我正在使用a:after，其中包含right: Ypx。

我想使用jQuery中的animate方法将元素(a:after)从Ypx移动到Zpx，我该怎么做？

例如：

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

我知道如何在没有动画的情况下做到这一点，只需执行 a:hover:after { right: Zpx }，但如何添加动画呢？

- Luis

我不确定 jQuery 能否实现这个。但是，你可能可以使用 CSS3 动画来完成它（我相信），但这在不支持 CSS3 的浏览器上将无法支持，当然，不支持 CSS3 的浏览器通常也不支持 :after 伪类标签... - Shmiddty

@Shmiddty：为什么不呢？:after在CSS3中甚至都不是新的。 - BoltClock

@BoltClock 你是对的。它是在CSS2中添加的。我的错误。 - Shmiddty

3个回答

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;    
}

- Shmiddty

它们在许多其他浏览器中得到支持：http://caniuse.com/css-transitions……否则，在您的代码中使用这些前缀有什么意义呢？ - tuff

1

@tuff 是的，但不适用于伪元素。 - Shmiddty

很不幸，我无法不支持其他浏览器，所以这个CSS3解决方案对我来说行不通。:-\ 不过还是谢谢你。 - Luis

@Luis 是的，不幸的是，我认为目前还不可能。 - Shmiddty

@Luis - 现在怎么样？现在可以了吗？ :) - ashleedawg

-4

使用 next() 代替。这里是如何实现完全相同的效果。

- Izaias

1

-1 完全错过了问题的重点。这是关于CSS伪元素的 - :after选择器。 - frnhr

请查看“[答案]”。 - ashleedawg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

你试图做的事情非常不专业，我强烈建议你使用真正的元素而不是尝试动画伪元素。然而，作为参考：唯一可以动画化伪元素的方法是插入一个 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/

这是使用原生JavaScript编写的代码，但您可以在jQuery的animate中使用step回调函数来连接到jQuery的缓动和时间函数。