您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

jquery重新播放css动画所遇问题解决_jquery

2024/6/12 3:40:07发布14次查看
最近在做css动画,遇到需要用脚本重新播放动画的情况。例如:
css动画代码
复制代码 代码如下:
.seed_txt_out .seed_txt h2 {
animation-name: seed-h2;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
position: relative;
top: 10px;
}
@keyframes seed-h2
{
from {top: -120px;}
to {top: 10px;}
}
jquery调用播放
复制代码 代码如下:
$(.seed_txt_out).children(div).removeclass(seed_txt);
$(.seed_txt_out).children(div).addclass(seed_txt);
这时候,会发现,第一次显示,动画会正确播放,但是,第二次的时候,动画就不会播放了。
后来上网查了一下,解决办法很简单,复制一个元素,把原来的去掉,在新的上面添加式样就可以了。
复制代码 代码如下:
$(opts.txt).children(div).removeclass(seed_txt);
temp = $(opts.txt).children(div:eq( + $(this).parent(ul).children(li).index(this) + ));
newdiv = temp.clone(true);
temp.after(newdiv);
temp.remove();
newdiv.addclass(seed_txt);
这里有个链接,老外解决的办法。还说了其它情况。遇到类似问题的朋友可以参考下,当然,是英文的。
http://css-tricks.com/restart-css-animation/
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product