提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery动画CSS 问题 解决 重新 播放 所遇
2023-06-13 09:15:04 时间
最近在做css动画，遇到需要用脚本重新播放动画的情况。例如：

css动画代码
复制代码代码如下:

.seed_txt_out.seed_txth2{
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;
}
@keyframesseed-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/

相关文章