Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery重新播放css动画所遇问题解决

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

发布时间:2014-03-13   编辑:www.jquerycn.cn
做css动画,遇到需要用脚本重新播放动画的情况,下面与大家分享下,感兴趣的朋友可以参考下,希望对大家有所帮助
最近在做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/

您可能感兴趣的文章:
jquery重新播放css动画所遇问题解决
暴风影音播放视频只有声音没有画面怎么办
IE浏览器网页上视频播放不了解决方法
电脑中在线观看视频 暂停后继续播放无声音
呆呆播放器不能使用怎么办 呆呆播放器不能用解决办法
HTML5音频与视频问题及解决方法
解决萌璃影音没有画面只有声音的问题
html5播放视频教程
H5开发视频遇到的问题及解决方案
虎牙直播常见问题汇总

关键词: jquery  重新播放  css动画   
[关闭]