我正在使用a:after
,其中包含right: Ypx
。
我想使用jQuery中的animate
方法将元素(a:after
)从Ypx移动到Zpx,我该怎么做?
例如:
[link-text][after]
[link-text]-- moving > --[after]
我知道如何在没有动画的情况下做到这一点,只需执行
a:hover:after { right: Zpx }
,但如何添加动画呢?我正在使用a:after
,其中包含right: Ypx
。
我想使用jQuery中的animate
方法将元素(a:after
)从Ypx移动到Zpx,我该怎么做?
例如:
[link-text][after]
[link-text]-- moving > --[after]
a:hover:after { right: Zpx }
,但如何添加动画呢?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()
这是使用原生JavaScript编写的代码,但您可以在jQuery的animate
中使用step
回调函数来连接到jQuery的缓动和时间函数。
<a href="#">Link <span></span></a>
比尝试动画伪元素好得多。 - methodofaction#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;
}
:after
选择器。 - frnhr
:after
伪类标签... - Shmiddty:after
在CSS3中甚至都不是新的。 - BoltClock