使用jQuery制作伪元素的动画

Animate of pseudo elements using jQuery

本文关键字：元素 动画 jQuery 使用      更新时间：2023-09-26

我使用的是a:after，它包含right: Ypx。

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

例如：

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

我知道没有动画怎么做，只做a:hover:after { right: Zpx }，但有动画怎么做？

您试图做的是非常棘手的，我强烈建议您放置make real元素，而不是尝试设置伪元素的动画。然而，供将来参考：为伪元素设置动画的唯一方法是插入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，但您可以使用jquery的animate中的step回调来挂接jquery的宽松和计时函数。

您可以使用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;    
}

请改用next（）。以下是你如何做到这一点。

相关文章：