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

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/

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com